html,
body{
  margin:0 !important;
  padding:0 !important;
  /* 밝은 배경색으로 변경 */
  background:#f4f9ff !important;
  color:#17325b;
  overflow-x:hidden;
  font-family: 'Pretendard', system-ui, -apple-system, sans-serif; /* 폰트 통일 */
}

body{
  overflow-x:hidden;
}

:root{
  --app-header-h:78px;
  --app-header-gap:0px;

  /* 커뮤니티 컬러셋을 라이트 테마로 전면 변경 */
  --community-bg-top:#f8fcff;
  --community-bg-bottom:#ecf5ff;
  --community-border:rgba(60, 114, 196, 0.12);
  --community-border-soft:rgba(60, 114, 196, 0.08);

  --community-text:#17325b; /* 짙은 네이비 (메인 텍스트) */
  --community-text-soft:#5f7fa8; /* 서브 텍스트 */
  --community-text-dim:#7b95b9; /* 비활성 텍스트 */

  --community-accent-grad:linear-gradient(135deg, #4f7fff 0%, #58a8ff 55%, #60d7eb 100%);
  --community-shadow:0 18px 48px rgba(57, 103, 184, 0.08);
  --community-shadow-strong:0 26px 64px rgba(72, 116, 206, 0.12);

  --community-card-bg:#ffffff;
  --community-card-bg-hover:#f7fbff;
  --community-btn-h:42px;
}

body::before{
  display:none !important;
  content:none !important;
}

main,
#content,
.content,
.content-wrapper,
.page-wrapper,
.site-main,
.wrap,
.wrap-compact{
  margin-top:0 !important;
  padding-top:0 !important;
}

.navbar,
.site-header,
header.site-header,
header.navbar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  margin-top:0 !important;
  transform:none !important;
  z-index:10000 !important;
}

.site-header-wrap,
.navbar-wrap,
.header-wrap,
.header-outer,
.topbar,
.top-header{
  margin-top:0 !important;
  padding-top:0 !important;
  top:0 !important;
}

.community-page{
  min-height:100vh;
  /* 랜딩페이지와 동일한 밝은 그라데이션 배경 적용 */
  background:
    radial-gradient(circle at top left, rgba(92,143,255,.12), transparent 22%),
    radial-gradient(circle at top right, rgba(101,215,255,.14), transparent 20%),
    linear-gradient(180deg, var(--community-bg-top) 0%, var(--community-bg-bottom) 100%);
  padding:calc(var(--app-header-h) + 2px) 0 48px !important;
  margin-top:0 !important;
  color:var(--community-text);
  overflow-x:hidden;
}

.community-wrap{
  width:min(1120px, calc(100vw - 32px));
  margin:0 auto;
  padding-top:36px !important;
}

.community-wrap-narrow{
  width:min(920px, calc(100vw - 32px));
}

.community-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:24px;
}

.community-title{
  margin:0;
  font-size:40px;
  line-height:1.2;
  letter-spacing:-.04em;
  color:#0d2548;
  font-weight:800;
}

.community-sub{
  margin:8px 0 0;
  color:var(--community-text-soft);
  font-size:16px;
  line-height:1.7;
}

/* 기본 버튼 스타일 (밝은 테마에 맞게) */
.community-write-btn,
.community-search-btn,
.detail-back-btn,
.detail-list-btn,
.like-btn,
.comment-action-btn,
.comment-collapse-all-btn,
.page-btn{
  min-height:var(--community-btn-h);
  padding:0 16px;
  border-radius:14px;
  border:1px solid rgba(64,116,205,.12); /* 연한 테두리 */
  background:#ffffff; /* 흰색 배경 */
  color:#24508c; /* 푸른 글씨 */
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  box-sizing:border-box;
  box-shadow: 0 4px 12px rgba(64,116,205,.04);
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease,
    opacity .16s ease;
}

.community-write-btn:hover,
.community-search-btn:hover,
.detail-back-btn:hover,
.detail-list-btn:hover,
.like-btn:hover,
.comment-action-btn:hover,
.comment-collapse-all-btn:hover,
.page-btn:hover{
  transform:translateY(-2px);
  border-color:rgba(64,116,205,.24);
  background:#f8fbff;
  box-shadow: 0 8px 20px rgba(64,116,205,.08);
}

/* 주요 액션 버튼 (글쓰기 등) */
.community-write-btn{
  min-height:48px;
  border:none;
  color:#ffffff;
  background:var(--community-accent-grad);
  box-shadow:0 12px 24px rgba(88,168,255,.26);
}

.community-write-btn:hover {
  background:linear-gradient(135deg, #4f7fff 0%, #58a8ff 55%, #60d7eb 100%);
  filter:brightness(1.05);
  box-shadow:0 18px 34px rgba(88,168,255,.34);
  color: #fff;
}

.community-write-btn-inline{
  width:100%;
  min-width:0;
}

.community-search-btn{
  min-height:48px;
  background: #f4f9ff;
}

.detail-back-btn,
.detail-list-btn,
.like-btn{
  min-height:40px;
}

/* 삭제 버튼 (위험 알림) */
.danger-btn{
  min-height:40px;
  padding:0 16px;
  border-radius:14px;
  border:1px solid rgba(255, 71, 87, 0.2);
  background:rgba(255, 71, 87, 0.05);
  color:#ff4757;
  font-weight:700;
  cursor:pointer;
  transition: all 0.2s ease;
}

.danger-btn:hover {
  background: rgba(255, 71, 87, 0.1);
}

.comment-action-btn-danger{
  background:rgba(255, 71, 87, 0.05);
  border-color:rgba(255, 71, 87, 0.2);
  color:#ff4757;
}

.community-search-box{
  margin-bottom:24px;
}

.community-search-form{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 164px 116px 126px;
  gap:12px;
  align-items:end;
}

/* 입력창 스타일 */
.community-search-input,
.community-input,
.community-textarea,
.community-file-input,
.comment-textarea{
  width:100%;
  border:1px solid var(--community-border);
  outline:none;
  border-radius:16px;
  background:#ffffff;
  color:var(--community-text);
  box-sizing:border-box;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.01);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.community-search-input::placeholder,
.community-input::placeholder,
.community-textarea::placeholder,
.comment-textarea::placeholder {
  color: #a0b6d4;
}

.community-search-input{
  min-height:48px; /* 버튼 높이와 맞춤 */
  padding:0 16px;
  font-size:15px;
}

.community-input,
.community-file-input{
  min-height:48px;
  padding:0 16px;
  font-size:15px;
}

.community-textarea,
.comment-textarea{
  padding:14px 16px;
  font-size:15px;
}

.community-input:focus,
.community-textarea:focus,
.community-file-input:focus,
.community-search-input:focus,
.comment-textarea:focus{
  border-color:#4f7fff;
  box-shadow:0 0 0 4px rgba(79, 127, 255, 0.15);
}

/* 드롭다운 스타일 */
.community-sort-dropdown{
  position:relative;
}

.community-sort-trigger{
  width:100%;
  min-height:48px; /* 버튼 높이 맞춤 */
  padding:0 16px;
  border-radius:16px;
  border:1px solid var(--community-border);
  background:#ffffff;
  color:#17325b;
  font-size:14px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.community-sort-trigger:hover{
  transform:translateY(-1px);
  border-color:rgba(79, 127, 255, 0.4);
}

.community-sort-trigger.is-open{
  border-color:#4f7fff;
  box-shadow:0 0 0 4px rgba(79, 127, 255, 0.15);
}

.community-sort-trigger-label{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.community-sort-trigger-arrow{
  font-size:12px;
  color:#a0b6d4;
  transition:transform .16s ease;
}

.community-sort-trigger.is-open .community-sort-trigger-arrow{
  transform:rotate(180deg);
}

.community-sort-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  z-index:200;
  padding:8px;
  border-radius:16px;
  background:#ffffff;
  border:1px solid var(--community-border);
  box-shadow:0 18px 44px rgba(57, 103, 184, 0.15);
  display:none;
}

.community-sort-menu.is-open{
  display:block;
}

.community-sort-option{
  width:100%;
  min-height:40px;
  padding:0 12px;
  border:none;
  border-radius:12px;
  background:transparent;
  color:#2c558c;
  font-size:14px;
  font-weight:600;
  text-align:left;
  display:flex;
  align-items:center;
  cursor:pointer;
  transition: background 0.2s ease;
}

.community-sort-option:hover{
  background:#f4f9ff;
}

.community-sort-option.is-active{
  background:#e6f1ff;
  color:#4f7fff;
  font-weight: 800;
}

/* 게시판/상세페이지 뼈대 카드 */
.community-board-box,
.detail-card,
.comments-card,
.write-card{
  background:var(--community-card-bg);
  border:1px solid var(--community-border);
  border-radius:28px;
  box-shadow:var(--community-shadow);
}

.community-board-box{
  padding:14px 20px 20px;
}

.detail-card{
  padding:32px;
  margin-bottom:20px;
}

.comments-card{
  padding:24px 32px;
}

.write-card{
  padding:32px;
}

/* 공지사항 카드 */
.community-notice-card{
  margin-bottom:24px;
  background:linear-gradient(180deg, #fffdf8 0%, #fffbf2 100%);
  border:1px solid rgba(255, 202, 40, 0.3);
  border-radius:24px;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(255, 202, 40, 0.08);
}

.community-notice-card-head{
  padding:20px 24px 16px;
  border-bottom:1px solid rgba(255, 202, 40, 0.2);
  background:linear-gradient(90deg, rgba(255, 202, 40, 0.1), rgba(255, 202, 40, 0.02));
}

.community-notice-title{
  color:#d48806; /* 따뜻하고 진한 노란색 */
  font-size:20px;
  font-weight:800;
}

.community-notice-sub{
  margin-top:6px;
  color:#a88642;
  font-size:14px;
  font-weight:600;
}

.community-notice-list{
  display:grid;
}

.community-notice-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 24px;
  text-decoration:none;
  border-top:1px solid rgba(255, 202, 40, 0.1);
  transition:background .2s ease;
}

.community-notice-item:hover{
  background:#fff5db;
}

.community-notice-item-left{
  display:flex;
  align-items:flex-start;
  gap:14px;
  min-width:0;
}

.community-notice-main{
  min-width:0;
}

.community-notice-post-title{
  color:#17325b;
  font-size:16px;
  font-weight:700;
  line-height:1.4;
  word-break:break-word;
}

.community-notice-meta{
  margin-top:8px;
  display:flex;
  gap:8px;
  align-items:center;
  color:#8198c3;
  font-size:13px;
  font-weight:600;
  flex-wrap:wrap;
}

.community-notice-item-right{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

/* 게시판 테이블 */
.community-table-wrap{
  width:100%;
  overflow-x:auto;
}

.community-table{
  width:100%;
  min-width:0;
  border-collapse:separate;
  border-spacing: 0 8px; /* 테이블 행 간격 추가 */
}

.community-table thead th{
  text-align:center;
  font-size:14px;
  color:#5b7da8;
  font-weight:700;
  padding:8px 16px 12px;
  white-space:nowrap;
}

.community-table thead .col-title{
  text-align:left;
}

.community-table tbody td{
  padding:16px 16px;
  background:#ffffff;
  color:#17325b;
  vertical-align:middle;
  font-size:15px;
  border-top:1px solid var(--community-border-soft);
  border-bottom:1px solid var(--community-border-soft);
}

.community-table tbody tr td:first-child {
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  border-left: 1px solid var(--community-border-soft);
}

.community-table tbody tr td:last-child {
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  border-right: 1px solid var(--community-border-soft);
}

.community-table tbody tr{
  transition:transform .2s ease, box-shadow .2s ease;
}

.community-table tbody tr:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(57, 103, 184, 0.06);
}

.community-table tbody tr:hover td {
  background: #fdfeff;
}

.col-num{ width:70px; }
.col-title{ width:auto; }
.col-writer{ width:180px; }
.col-like{ width:100px; }
.col-views{ width:90px; }
.col-date{ width:120px; }

.col-head-left,
.col-cell-left{
  text-align:left !important;
}

.col-head-center,
.col-cell-center{
  text-align:center !important;
}

.community-title-link{
  color:#17325b;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-weight:700;
}

.community-title-link:hover .title-main{
  color:#4f7fff;
}

.title-main{
  display:-webkit-box;
  -webkit-line-clamp:1; /* 한 줄로 변경하여 더 깔끔하게 */
  -webkit-box-orient:vertical;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:normal;
  line-height:1.4;
  word-break:break-word;
  transition: color 0.2s ease;
}

.title-chips{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  flex:0 0 auto;
}

.community-writer-box{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  min-height:26px;
  min-width:0;
  padding-left:0;
}

.community-writer-inline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.community-writer-box[data-nickname-font-key],
.community-writer-inline[data-nickname-font-key],
.comment-author-wrap[data-nickname-font-key],
.detail-meta-item[data-nickname-font-key],
.community-notice-meta[data-nickname-font-key]{
  position:relative;
}

.community-writer-box .nickname-text{
  max-width:112px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px !important;
  line-height:1.2;
}

.community-stat-cell{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  color:#5f7fa8;
  font-weight: 600;
}

.community-empty{
  padding:60px 12px;
  text-align:center;
  color:#7b95b9;
  font-weight:700;
  font-size:16px;
  background: #f8fbff;
  border-radius: 16px;
  border: 1px dashed var(--community-border);
}

.notice-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:0 12px;
  border-radius:999px;
  background:linear-gradient(135deg, #ffca28, #ffb300);
  color:#ffffff;
  font-size:12px;
  font-weight:800;
}

.row-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  background:#f0f5ff;
  color:#4f7fff;
  font-size:12px;
  font-weight:700;
  gap:4px;
}

.row-chip-like{
  background:#fff0f2;
  color:#ff4757;
}

.row-chip-like .thumb-icon {
  color: #ff4757;
}

.thumb-icon{
  display:inline-flex;
  width:18px;
  height:18px;
  color:currentColor;
  flex:0 0 auto;
}

.thumb-icon-sm{
  width:14px;
  height:14px;
}

.thumb-icon-xs{
  width:13px;
  height:13px;
}

.thumb-icon svg{
  width:100%;
  height:100%;
  display:block;
}

/* 페이지네이션 */
.page-btn{
  min-width:44px;
  padding:0 14px;
  background:#ffffff;
  border-color: var(--community-border);
  color: #5f7fa8;
}

.page-btn.is-current{
  background:var(--community-accent-grad);
  color:#ffffff;
  border-color:transparent;
  box-shadow: 0 6px 16px rgba(88,168,255,.2);
}

.page-btn.is-disabled{
  opacity:0.5;
  pointer-events:none;
  background: #f4f9ff;
}

.community-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:30px;
  flex-wrap:wrap;
}

/* 닉네임, 폰트 공통 클래스 */
.nickname-text{
  display:inline-block;
  line-height:1.2;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  backface-visibility:hidden;
  vertical-align:middle;
  white-space:nowrap;
  transform:translateZ(0);
  font-size:14px;
}

.nickname-strong{
  display:inline-block;
  line-height:1.2;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  backface-visibility:hidden;
  vertical-align:middle;
  white-space:nowrap;
  transform:translateZ(0);
  font-weight:800;
  font-size:14px;
}

.font-default{ font-family:inherit !important; }
.font-gaegu{ font-family:"Gaegu", cursive !important; }
.font-dongle{ font-family:"Dongle", sans-serif !important; }
.font-gowun_batang{ font-family:"Gowun Batang", serif !important; }
.font-nanum_pen{ font-family:"Nanum Pen Script", cursive !important; }
.font-dokdo{ font-family:"Dokdo", cursive !important; }
.font-bubblegum_sans{ font-family:"Bubblegum Sans", cursive !important; }
.font-delius_swash_caps{ font-family:"Delius Swash Caps", cursive !important; }
.font-boogaloo{ font-family:"Boogaloo", cursive !important; }
.font-love_ya_like_a_sister{ font-family:"Love Ya Like A Sister", cursive !important; }
.font-luckiest_guy{ font-family:"Luckiest Guy", cursive !important; }
.font-coming_soon{ font-family:"Coming Soon", cursive !important; }
.font-life_savers{ font-family:"Life Savers", cursive !important; }
.font-chewy{ font-family:"Chewy", cursive !important; }
.font-cabin_sketch{ font-family:"Cabin Sketch", cursive !important; }
.font-mouse_memoirs{ font-family:"Mouse Memoirs", sans-serif !important; }
.font-londrina_shadow{ font-family:"Londrina Shadow", cursive !important; }
.font-modak{ font-family:"Modak", cursive !important; }
.font-amatic_sc{ font-family:"Amatic SC", cursive !important; }
.font-capriola{ font-family:"Capriola", sans-serif !important; }
.font-mclaren{ font-family:"McLaren", cursive !important; }

/* 닉네임 효과 (밝은 배경에 맞게 조정) */
.effect-none{
  color:#17325b; /* 텍스트 기본색 */
  text-shadow:none !important;
  filter:none !important;
  opacity:1;
  transform:none;
}

.effect-neon-blue{
  color:#1eaaf1 !important;
  text-shadow:
    0 0 2px rgba(30,170,241,.4),
    0 0 6px rgba(30,170,241,.2);
}

.effect-rainbow-flow{
  background:linear-gradient(90deg,#ff5f8f 0%,#ffae42 16%,#fff15a 32%,#20e06e 48%,#3dafff 66%,#7c71ff 82%,#ff56cf 100%);
  background-size:240% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  -webkit-text-fill-color:transparent;
  text-shadow:none !important;
  animation:rainbowFlowSharp 2.4s linear infinite;
}

.effect-gold-glow{
  color:#e8a317 !important;
  text-shadow:
    0 0 2px rgba(232,163,23,.4),
    0 0 6px rgba(232,163,23,.2);
}

.effect-sparkle{
  color:#d4af37 !important;
  animation:sparkleBlinkSharp 1.2s ease-in-out infinite;
}

.effect-glitch{
  color:#2c3e50 !important;
  text-shadow:
    -1px 0 rgba(255,0,110,.5),
    1px 0 rgba(0,245,255,.5);
  animation:glitchShakeSharp 1.1s steps(2,end) infinite;
}

.effect-float-wave{
  color:#2980b9 !important;
  animation:floatWaveSharp 1.9s ease-in-out infinite;
  display:inline-block;
}

.effect-fire-glow{
  color:#e74c3c !important;
  text-shadow:
    0 0 2px rgba(231,76,60,.4),
    0 0 6px rgba(231,76,60,.2);
  animation:fireFlickerSharp 1.05s ease-in-out infinite;
}

.effect-ice-glow{
  color:#3498db !important;
  text-shadow:
    0 0 2px rgba(52,152,219,.4),
    0 0 6px rgba(52,152,219,.2);
  animation:icePulseSharp 1.6s ease-in-out infinite;
}

@keyframes rainbowFlowSharp{
  0%{ background-position:0% center; }
  100%{ background-position:240% center; }
}
@keyframes sparkleBlinkSharp{
  0%,100%{ opacity:1; }
  50%{ opacity:0.6; }
}
@keyframes glitchShakeSharp{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-1px,0); }
  40%{ transform:translate(1px,0); }
  60%{ transform:translate(0,-1px); }
  80%{ transform:translate(0,1px); }
}
@keyframes floatWaveSharp{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-2px); }
}
@keyframes fireFlickerSharp{
  0%,100%{ opacity:1; }
  50%{ opacity:0.8; }
}
@keyframes icePulseSharp{
  0%,100%{ opacity:1; }
  50%{ opacity:0.8; }
}

/* 상세페이지 스타일 */
.detail-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:24px;
}

.detail-owner-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.detail-owner-actions form{
  margin:0;
}

.detail-header{
  padding-bottom:24px;
  border-bottom:1px solid var(--community-border);
}

.detail-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}

.detail-title{
  margin:0;
  font-size:36px;
  line-height:1.2;
  letter-spacing:-.03em;
  color:#0d2548;
  word-break:break-word;
  font-weight: 800;
}

.detail-meta{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-top:20px;
}

.detail-meta-item{
  display:flex;
  align-items:center;
  gap:8px;
  color:#2c558c;
  font-size:15px;
  font-weight:600;
  flex-wrap:wrap;
}

.meta-label{
  color:#7894ba;
}

.detail-gallery{
  margin-top:30px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.detail-gallery-item{
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--community-border-soft);
  background:#f8fbff;
}

.detail-gallery-item img{
  display:block;
  width:100%;
  height:100%;
  max-height:400px;
  object-fit:cover;
}

.detail-content{
  padding:32px 0 20px;
  color:#17325b;
  font-size:17px;
  line-height:1.8;
  word-break:break-word;
}

.detail-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid var(--community-border);
  flex-wrap:wrap;
}

/* 좋아요 버튼 (크게 강조) */
form[action*="like"] .like-btn,
a.like-btn {
  min-height: 48px;
  padding: 0 24px;
  border-radius: 24px;
  font-size: 16px;
  border: 1px solid #ff4757;
  color: #ff4757;
  background: #fff0f2;
}

form[action*="like"] .like-btn:hover,
a.like-btn:hover {
  background: #ff4757;
  color: white;
}

form[action*="like"] .like-btn.is-liked {
  background: #ff4757;
  color: white;
}

/* 글쓰기 카드 */
.write-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:24px;
}

.write-title{
  margin:0;
  font-size:32px;
  line-height:1.2;
  letter-spacing:-.03em;
  color:#0d2548;
  font-weight: 800;
}

.write-sub{
  margin:10px 0 0;
  color:#5f7fa8;
}

.write-sub-small{
  font-size:13px;
}

.write-form{
  display:grid;
  gap:20px;
}

.form-group{
  display:grid;
  gap:10px;
}

.form-label{
  font-size:15px;
  font-weight:700;
  color:#17325b;
}

.community-textarea{
  min-height:300px;
  resize:vertical;
  line-height:1.7;
}

.comment-textarea{
  min-height:100px;
  resize:vertical;
  line-height:1.6;
}

.comment-form-actions,
.write-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:10px;
  flex-wrap:wrap;
}

/* 댓글 영역 */
.comments-head{
  margin-bottom:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  border-bottom: 1px solid var(--community-border);
  padding-bottom: 16px;
}

.comments-title{
  margin:0;
  color:#0d2548;
  font-size:24px;
  font-weight:800;
}

.comment-form-main{
  margin-bottom:24px;
}

.comment-login-box{
  margin-bottom:24px;
  background: #f8fbff;
  border: 1px dashed var(--community-border);
  border-radius: 16px;
  padding: 30px;
  text-align: center;
}

.comments-list{
  display:grid;
  gap:16px;
}

.comment-item{
  display:grid;
  gap:8px;
}

.comment-main{
  background:#f9fbff;
  border:1px solid rgba(60, 114, 196, 0.08);
  border-radius:20px;
  padding:16px 20px;
}

.comment-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.comment-author-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  min-width:0;
}

.comment-date{
  color:#7894ba;
  font-size:13px;
  font-weight:600;
}

.comment-content{
  color:#17325b;
  font-size:15px;
  line-height:1.6;
  word-break:break-word;
}

.comment-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}

.comment-actions form{
  margin:0;
  display:inline-flex;
}

.comment-action-btn,
.comment-action-btn-danger,
.comment-like-btn,
.reply-toggle-btn,
.comment-edit-toggle-btn,
.comment-collapse-btn{
  min-height:36px;
  padding:0 14px;
  border-radius:12px;
  background: #ffffff;
  border: 1px solid var(--community-border-soft);
  color: #5f7fa8;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  box-sizing:border-box;
  font-size:13px;
  font-weight:700;
  line-height:1;
}

.comment-like-btn.is-liked {
  color: #ff4757;
  background: #fff0f2;
  border-color: #ff4757;
}

.comment-actions .comment-action-btn,
.comment-actions .comment-action-btn-danger{
  min-width:86px;
}

.comment-inline-icon{
  display:inline-flex;
  width:14px;
  height:14px;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
}

.comment-inline-icon svg{
  width:100%;
  height:100%;
  display:block;
}

.comment-count-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:#eef5ff;
  color:#4f7fff;
  font-size:11px;
  font-weight:800;
  line-height:1;
}

.reply-form-box{
  display:none;
  margin-top:10px;
}

.reply-form-box.is-open{
  display:block;
  animation:commentFoldDown .2s ease;
}

@keyframes commentFoldDown{
  from{ opacity:0; transform:translateY(-8px); }
  to{ opacity:1; transform:translateY(0); }
}

.comment-children{
  margin-left:20px; /* 들여쓰기 공간 확보 */
  padding-left:16px;
  border-left:2px solid var(--community-border);
  display:grid;
  gap:12px;
}

.comment-children.is-collapsed{
  display:none;
}

.comment-collapse-icon{
  transition:transform .2s ease;
}

.comment-collapse-btn.is-open .comment-collapse-icon{
  transform:rotate(180deg);
}

.edit-image-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}

.edit-image-card{
  display:grid;
  gap:10px;
  background:#f8fbff;
  border:1px solid var(--community-border);
  border-radius:16px;
  padding:12px;
}

.edit-image-card img{
  width:100%;
  height:140px;
  object-fit:cover;
  border-radius:12px;
}

.edit-image-check{
  color:#5f7fa8;
  font-size:13px;
  font-weight:600;
  display:flex;
  gap:8px;
  align-items:center;
}

.delete-all-images-line{
  margin-top:16px;
  display:flex;
  gap:8px;
  align-items:center;
  color:#ff4757;
  font-size:14px;
  font-weight:700;
}

/* 반응형 */
@media (max-width: 1100px){
  .community-search-form{
    grid-template-columns:1fr 164px 116px 126px;
  }
}

@media (max-width: 980px){
  .community-wrap,
  .community-wrap-narrow{
    width:min(100%, calc(100vw - 20px));
  }

  .community-wrap{
    padding-top:26px !important;
  }

  .community-title{
    font-size:32px;
  }

  .community-search-form{
    grid-template-columns:1fr 1fr;
  }

  .community-board-box,
  .detail-card,
  .comments-card,
  .write-card{
    border-radius:24px;
  }

  .community-board-box{
    padding:16px;
  }

  .detail-card,
  .write-card{
    padding:24px;
  }

  .comments-card{
    padding:20px;
  }

  .detail-title{
    font-size:28px;
  }

  .detail-gallery{
    grid-template-columns:1fr;
  }

  .edit-image-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
  :root{
    --app-header-h:74px;
  }

  .community-page{
    padding:calc(var(--app-header-h) + 2px) 0 22px !important;
  }

  .community-wrap,
  .community-wrap-narrow{
    width:min(100%, calc(100vw - 20px));
  }

  .community-wrap{
    padding-top:18px !important;
  }

  .community-title{
    font-size:28px;
  }

  .community-sub{
    font-size:14px;
    line-height:1.6;
  }

  .community-search-form{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
    align-items:stretch;
  }

  .community-search-form .community-search-input{
    grid-column:1 / -1;
  }

  .community-sort-dropdown,
  .community-search-btn,
  .community-write-btn-inline{
    width:100%;
    min-width:0;
  }

  .community-sort-trigger,
  .community-search-btn,
  .community-write-btn-inline{
    min-height:44px;
    padding:0 10px;
    font-size:13px;
  }

  .community-table-wrap{
    overflow-x:visible;
  }

  .community-table{
    min-width:0;
    table-layout:fixed;
  }

  .community-table th:nth-child(1),
  .community-table td:nth-child(1),
  .community-table th:nth-child(4),
  .community-table td:nth-child(4),
  .community-table th:nth-child(6),
  .community-table td:nth-child(6){
    display:none;
  }

  .community-table th:nth-child(2),
  .community-table td:nth-child(2){
    width:52%;
  }

  .community-table th:nth-child(3),
  .community-table td:nth-child(3){
    width:24%;
  }

  .community-table th:nth-child(5),
  .community-table td:nth-child(5){
    width:24%;
  }

  .community-table thead th,
  .community-table tbody td{
    padding:14px 8px;
    font-size:14px;
  }

  .community-table tbody td{
    vertical-align:top;
  }

  .community-title-link{
    align-items:flex-start;
  }

  .title-main{
    display:-webkit-box;
    -webkit-line-clamp:2; /* 모바일에서는 2줄 허용 */
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:normal;
    line-height:1.4;
    max-height:2.8em;
    word-break:break-word;
  }

  .title-chips{
    display:none;
  }

  .community-writer-box{
    gap:2px;
    min-width:0;
  }

  .community-writer-box .nickname-text{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px !important;
    line-height:1.2;
  }

  .community-writer-box .row-chip{
    display:none;
  }

  .nickname-text,
  .nickname-strong{
    font-size:13px !important;
  }

  .row-chip{
    padding:0 8px;
    min-height:24px;
    font-size:11px;
  }

  .detail-topbar,
  .write-head{
    flex-direction:column;
    align-items:stretch;
  }

  .detail-owner-actions{
    width:100%;
  }

  .detail-owner-actions > *{
    flex:1 1 auto;
  }

  .detail-back-btn,
  .detail-list-btn,
  .danger-btn{
    width:100%;
  }

  .detail-meta{
    gap:12px;
    flex-direction:column;
    align-items:flex-start;
  }

  .detail-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .detail-actions > *{
    width:100%;
  }

  .comments-head{
    align-items:stretch;
  }

  .comment-collapse-all-btn{
    width:100%;
  }

  .comment-main{
    padding:14px;
  }

  .comment-top{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }

  .comment-actions{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }

  .comment-actions form{
    width:100%;
  }

  .comment-actions .comment-action-btn,
  .comment-actions .comment-action-btn-danger{
    width:100%;
    min-width:0;
  }

  .comment-children{
    margin-left:12px;
    padding-left:12px;
  }
}

@media (max-width: 540px){
  .community-page{
    padding:calc(var(--app-header-h) + 2px) 0 18px !important;
  }

  .community-wrap,
  .community-wrap-narrow{
    width:calc(100vw - 16px);
  }

  .community-wrap{
    padding-top:14px !important;
  }

  .community-title{
    font-size:24px;
  }

  .community-board-box{
    padding:12px;
  }

  .detail-card,
  .write-card{
    padding:16px;
  }

  .comments-card{
    padding:16px;
  }

  .community-write-btn,
  .community-search-btn,
  .detail-back-btn,
  .detail-list-btn,
  .like-btn,
  .comment-action-btn,
  .comment-collapse-all-btn{
    border-radius:12px;
    font-size:13px;
  }

  .community-search-input,
  .community-input,
  .community-textarea,
  .community-file-input,
  .comment-textarea{
    font-size:14px;
  }

  .community-search-form{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .community-sort-trigger,
  .community-search-btn,
  .community-write-btn-inline{
    min-height:42px;
    padding:0 8px;
    font-size:12px;
  }

  .community-table thead th,
  .community-table tbody td{
    padding:12px 8px;
    font-size:13px;
  }

  .community-table th:nth-child(2),
  .community-table td:nth-child(2){
    width:54%;
  }

  .community-table th:nth-child(3),
  .community-table td:nth-child(3){
    width:22%;
  }

  .community-table th:nth-child(5),
  .community-table td:nth-child(5){
    width:24%;
  }

  .community-writer-box .nickname-text,
  .nickname-text,
  .nickname-strong{
    font-size:12px !important;
  }

  .detail-title{
    font-size:24px;
  }

  .detail-content{
    padding:24px 0 10px;
    font-size:16px;
    line-height:1.7;
  }

  .comments-title{
    font-size:20px;
  }

  .comment-content{
    font-size:14px;
  }

  .comment-actions{
    grid-template-columns:1fr;
  }

  .edit-image-grid{
    grid-template-columns:1fr;
  }
}