/* =========================
     CSS VARIABLES & BASE
     ========================= */
:root{
  --bg:#ffffff; --text:#111827; --muted:#6b7280; --line:#e5e7eb;
  --brand:#111827; --green:#16a34a; --green-bg:#dcfce7;
  --chip:#f8fafc; --chip-border:#e5e7eb;
  /* 헤더 간격 제어 */
  --headbar-overlap:-61px;   /* 로고 아래로 headbar를 끌어올리는 양 */
  --nav-lift:51px;          /* (핫픽스) 네비 전체를 위로 당기는 양 (기존 61→66) */
  --headbar-fine:-118px;

  /* [VAR] 글쓰기 버튼 최소 폭 */
  --btn-write-min:81px;
}

  *{box-sizing:border-box}
  html{scrollbar-gutter:stable both-edges}
  @media (pointer:fine){ body{overflow-y:scroll} }
  html,body{height:100%}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",Segoe UI,Roboto,sans-serif;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  }

  /* =========================
     CONTAINER
     ========================= */
  .container{width:100%; max-width:calc(100svh * 4 / 3); margin:0 auto; padding:0 8px;}
  @media (max-aspect-ratio:3/4){ .container{max-width:720px; padding:0 20px;} }

  /* =========================
     HEADER (brand + headbar)
     ========================= */
  .header{
    position:relative; display:flex; flex-direction:column; align-items:center; gap:4px;
    /* headbar 겹침 + nav 리프트만큼 공간 확보 */
    padding:0 0 calc(6px + var(--headbar-overlap) + var(--nav-lift) + var(--headbar-fine));
    border-bottom:0; /* 구분선은 .nav에서 관리 */
  }
  .brand-img{ padding-inline-start:max(10px, env(safe-area-inset-left)); text-decoration:none; }
  .brand-img img{ display:block; height:96px; width:auto; object-fit:contain; }
  @media (min-width:768px), (max-aspect-ratio:3/4){ .brand-img img{ height:120px; } }

  .headbar{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    padding:2px 0; position:relative; z-index:2;
    /* (핫픽스) 살짝 덜 끌어올려 과도한 겹침 완화: +12px 보정 */
    transform: translateY(calc(-1 * var(--headbar-overlap) + var(--headbar-fine)));
    /* 클릭 이슈: 컨테이너는 통과, 실제 버튼/링크만 클릭 가능 */
    pointer-events:none;
  }
  .headbar .quick-links,
  .headbar .quick-links * ,
  .headbar .timebar,
  .headbar .timebar * { pointer-events:auto; }

  /* 로고 클릭 우선 */
  #brandHome{ position:relative; z-index:10; }

  .quick-links{ display:flex; gap:12px; align-items:center; justify-content:center; padding-inline-start:max(10px, env(safe-area-inset-left)); flex-wrap:nowrap; }
  .ql-link{
    padding:6px 10px; border:1px solid var(--line); border-radius:12px;
    background:#f3f4f6; color:var(--text); text-decoration:none; font-size:14px;
    transition:transform .15s; white-space:nowrap; text-align:center; min-width:30px;
  }
  .ql-link:hover{ transform:translateY(-1px); }

  .timebar{ width:100%; display:flex; justify-content:flex-end; padding-inline-end:max(10px, env(safe-area-inset-right)); }
  .timebar.rightstack{ flex-direction:column; align-items:flex-end; gap:1px; }
  .time{ font-size:12px; line-height:1; color:var(--muted); }
  .time.dday{ font-weight:600; }

  /* =========================
     NAV (chips rows)
     ========================= */
  .nav{
    /* (핫픽스) 상단 선 추가 + 상단 여백 축소 + 아래 선 유지 */
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding-top:2px;            /* 10px → 2px (핫픽스) */
    padding-bottom:6px;
    margin-top:calc(-1 * var(--nav-lift));
    position:relative; z-index:1;
  }
  .nav-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; padding:6px 0; }
  .nav-row.scroll-x{ flex-wrap:nowrap; justify-content:center; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action:pan-x; scrollbar-width:none; will-change:scroll-position; }
  .nav-row.scroll-x::-webkit-scrollbar{ display:none; }
  .nav-row.scroll-x.overflow{ justify-content:flex-start; }
  .nav-row.scroll-x.dragging{ cursor:grabbing; user-select:none; }
  .nav-row a{ text-decoration:none; }
  .chip,.subchip{
    background:var(--chip); border:1px solid var(--chip-border); color:var(--text);
    border-radius:999px; padding:6px 10px; font-size:14px; cursor:pointer; transition:transform .15s; flex:0 0 auto;
  }
  .subchip{ border-radius:8px; }
  .chip:hover,.subchip:hover{ transform:translateY(-1px); }
  .chip.active,.subchip.active{ background:var(--brand); color:#fff; border-color:var(--brand); }

  /* =========================
     LAYOUT / CARDS
     ========================= */
  .section{ padding:18px 0; }
  .grid{ display:grid; gap:28px; grid-template-columns:repeat(2,1fr); }
  @media (max-aspect-ratio:3/4){ .grid{ grid-template-columns:1fr; gap:24px; } }
  .card{ border:1px solid var(--line); border-radius:16px; padding:20px 24px; background:#fafafa; }
  .card h2{ margin:0 0 10px; font-size:22px; }

  .row{ display:flex; flex-direction:column; gap:8px; margin:10px 0; }
  label{ font-size:14px; color:var(--muted); }
  .substeps{ margin:6px 0 10px 14px; padding-left:12px; border-left:2px solid var(--line); }
  .substeps .row{ margin:8px 0; }

  input[type="text"]{
    width:100%; height:44px; padding:10px 12px; font-size:17px;
    border:1px solid #cbd5e1; border-radius:10px; outline:none; transition:border-color .15s, background-color .15s;
  }
  input[type="text"]:focus{ border-color:#60a5fa; box-shadow:0 0 0 3px rgba(59,130,246,.2); }
  input[type="text"].ok{ border-color:var(--green); background:var(--green-bg); }
  input[type="text"].bad{ border-color:#ef4444; background:#fee2e2; }

  .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

  /* =========================
     TABS VIEW
     ========================= */
  #tabs{ display:none; }
  body.is-home #home{ display:flex; }
  body.is-home #grid, body.is-home #tabs{ display:none; }
  body.is-tab  #home, body.is-tab  #grid{ display:none; }
  body.is-tab  #tabs{ display:block; }
  #home[hidden], #tabs[hidden]{ display:none!important; }

  .tabs-grid{ column-count:2; column-gap:28px; }
  @media (max-aspect-ratio:3/4){ .tabs-grid{ column-count:1; column-gap:24px; } }
  #tabs[data-ctx="nae"] .tabs-grid{ column-count:1; column-gap:24px; }

  .tabs-card{ break-inside:avoid; display:inline-block; width:100%; margin:0 0 28px; border:1px solid var(--line); border-radius:16px; padding:20px 24px; background:#fafafa; }
  .tabs-card h2{ margin:0 0 10px; font-size:22px; }
  .tabs-muted{ color:var(--muted); font-size:14px; }
  .actions{ display:flex; gap:8px; margin-top:12px; }
  .btn{ appearance:none; border:1px solid transparent; border-radius:10px; padding:10px 14px; font-size:14px; cursor:pointer; transition:filter .15s; }
  .btn-green{ background:#16a34a; border-color:#16a34a; color:#fff; }
  .btn-red{ background:#ef4444; border-color:#ef4444; color:#fff; }
  .btn-green:hover, .btn-red:hover{ filter:brightness(.95); }
  #tabs .global-actions{ display:flex; justify-content:center; gap:8px; margin:16px 0 28px; column-span:all; }
  #tabs[data-loading="1"] .global-actions{ display:none!important; }

  /* Input wrap + ghost */
  .input-wrap{ position:relative; display:grid; width:100%; }
  .input-wrap > input[type="text"]{ grid-area:1/1; width:100%; padding-right:90px; }
  .ghost-in{ grid-area:1/1; justify-self:end; align-self:center; margin-right:12px; color:#ef4444; opacity:.65; font-size:13px; pointer-events:none; white-space:nowrap; }
  #tabs[data-ctx="mo"] .ghost-in{ color:var(--muted)!important; opacity:.8!important; font-size:12px; }

  /* Matrix-table */
  .matrix-table{ width:100%; border-collapse:collapse; border-spacing:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
  .matrix-table th,.matrix-table td{ padding:10px 12px; border-bottom:2px solid #cbd5e1; border-right:2px solid #cbd5e1; vertical-align:top; font-size:14px; }
  .matrix-table tr:last-child td,.matrix-table tr:last-child th{ border-bottom:none; }
  .matrix-table th:last-child,.matrix-table td:last-child{ border-right:none; }
  .matrix-table thead th{ background:#e5e7eb; text-align:center; font-weight:700; color:#111; }
  .matrix-table tbody tr:first-child td{ border-top:2px solid #cbd5e1; }
  .matrix-table .cat{ background:#e5e7eb; font-weight:600; width:120px; text-align:center; vertical-align:middle; }
  .matrix-table .content{ background:#f7f7f7; }
  .matrix-table .content .line{ display:flex; gap:6px; align-items:center; margin:6px 0; }
  .matrix-table .bullet{ width:6px; height:6px; border-radius:50%; background:#747474; flex:0 0 6px; }
  .matrix-table .content input[type="text"]{ flex:1; width:100%; min-width:0; height:40px; font-size:14px; }

  /* 표 셀 전용 ghost 위치 */
  .matrix-table .input-wrap{ position:relative; display:block; width:100%; }
  .matrix-table .input-wrap > input[type="text"]{ width:100%; padding-right:72px!important; }
  .matrix-table .ghost-in{
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    pointer-events:none; max-width:min(40%,220px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-size:12px; color:var(--muted); opacity:.8; z-index:1;
  }
  #tabs[data-ctx="nae"] .ghost-in{
    left:12px; right:12px; max-width:none!important; overflow:auto!important; text-overflow:clip!important; white-space:nowrap!important;
    -ms-overflow-style:none; scrollbar-width:none;
  }
  #tabs[data-ctx="nae"] .ghost-in::-webkit-scrollbar{ display:none; }
  body.chips-overflow #tabs[data-ctx="nae"] .ghost-in{ display:none!important; }
  body.chips-overflow #tabs[data-ctx="nae"] .input-wrap > input[type="text"]{ padding-right:12px!important; }

  /* Home hero */
  .home-hero{ display:flex; justify-content:center; align-items:center; min-height:40vh; padding:8px 0; }
  .home-hero img{ max-width:80%; height:auto; display:block; border-radius:12px; }

  /* =========================
     COMMUNITY BOARD (new)
     ========================= */
  body.is-board #home, body.is-board #grid, body.is-board #tabs{ display:none!important; }
  .board-page{ padding-top:12px; }

  .board-head{
    display:flex;
    align-items:center;
    gap:8px;
    margin:6px 0 12px;
  }

  .board-head h2{
    margin:0;
    font-size:20px;
    white-space:nowrap;   /* "임고냥 게시판" 줄바꿈 방지 */
    flex:0 0 auto;        /* 제목은 내용만큼만 차지 */
    margin-right:auto;    /* 오른쪽 영역(카테고리/검색/글쓰기)을 끝으로 밀어내기 */
  }


  .board-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;               /* 내용 크기만큼만 차지 */
    flex-wrap:nowrap;            /* 카테고리/검색/글쓰기 줄바꿈 방지 */
    justify-content:flex-end;    /* 그룹을 오른쪽 끝에 정렬 */
  }


  .board-actions select{
    height:36px;
    font-size:14px;
    padding:6px 8px;
    border-radius:8px;
    border:1px solid #cbd5e1;
    background:#fff;
    flex:0 0 auto;        /* 카테고리는 내용 크기만큼 */
    white-space:nowrap;
  }

  .board-actions input[type="text"]{
    height:36px;
    font-size:14px;
    padding:8px 10px;
    border-radius:8px;
    border:1px solid #cbd5e1;
    flex:0 1 220px;       /* 기본 폭 220px, 남는 공간에 따라 줄어들 수 있음 */
    max-width:260px;      /* 너무 길어지지 않도록 상한 설정 */
    min-width:0;          /* 폭이 좁을 때도 한 줄 유지 */
  }

/* [ANCHOR-BOARD-WRITE-CSS] 익명 글쓰기 폼 */
.board-note{
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  margin:6px 0 8px;
}
.board-note p{ margin:4px 0; }

/* [BOARD] 글쓰기 버튼 확장 */
#btnWrite.btn{
  min-width:var(--btn-write-min);
  padding:8px 9px;
  white-space:nowrap;  /* 버튼 텍스트 줄바꿈 방지 */
  flex:0 0 auto;       /* 한 줄 레이아웃에서 버튼이 자기 크기만 차지하도록 고정 */
}


.board-write{
  margin:12px 0 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fafafa;
  padding:16px;
}

/* 글쓰기 폼 row 기본: 세로 배치 */
.board-write .row{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:8px 0;
}

/* 두 개짜리(row.two)는 가로로 나열 (카테고리+비밀번호 등) */
.board-write .row.two{
  flex-direction:row;
}

/* row.two 안의 input/select를 반반 */
.board-write .row.two > input,
.board-write .row.two > select{
  flex:1;
  min-width:0;
}

/* 글쓰기 폼 카테고리 셀렉트 */
.board-write select{
  width:100%;
  padding:10px 12px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  font-size:14px;
  background:#fff;
}

.board-write input[type="text"],
.board-write input[type="url"],
.board-write textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  font-size:14px;
}

.board-write textarea{
  /* 내용 칸 확장: 기본 220px, 화면 40vh까지 반응, 최대 520px */
  min-height:220px;
  height:clamp(220px, 40vh, 520px);
  resize:vertical;
  line-height:1.5;
}

.board-write .write-actions{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-end;
  margin-top:8px;
}



  .board-table-wrap{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
  .board-table{ width:100%; border-collapse:collapse; }
  .board-table th,.board-table td{ padding:10px 12px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle; }
  .board-table th{ background:#f3f4f6; text-align:left; }
  .board-table tr:last-child td{ border-bottom:none; }
  .board-table .title{ display:flex; gap:6px; align-items:center; min-width:0; }
  .board-table .title a{ color:var(--text); text-decoration:none; display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .board-table .badge{ font-size:12px; border:1px solid #e5e7eb; border-radius:999px; padding:2px 6px; background:#f8fafc; }
  .board-table .cmt{ font-size:12px; color:#64748b; }

/* 행 전체 클릭 힌트 */
.board-table tbody tr[data-href]{ cursor:pointer; }
.board-table tbody tr[data-href]:hover{ background:rgba(0,0,0,0.035); }

.board-muted{ color:var(--muted); text-align:center; }


  .board-footer{ display:flex; justify-content:center; margin:12px 0; }
  .board-pager{ display:flex; gap:8px; align-items:center; }
  .board-pager button{ padding:6px 10px; border:1px solid var(--line); border-radius:6px; background:#fff; cursor:pointer; }

  @media (max-width:720px){
    .board-head{
      gap:6px;
    }
    .board-head h2{
      font-size:18px;              /* 제목 살짝 축소 */
    }
    .board-actions{
      gap:6px;                      /* 요소 간 간격 축소 */
    }
    .board-actions input[type="text"]{
      font-size:13px;
      padding:6px 8px;              /* 검색창 패딩 축소 */
      flex:0 1 160px;               /* 모바일에서는 기본 폭을 더 줄여 한 줄 유지 */
      max-width:200px;              /* 화면이 좁을 때도 검색창이 과하게 길어지지 않도록 제한 */
    }
    .board-table th:nth-child(3),
    .board-table td:nth-child(3){
      width:120px;
    }
  }


  /* Tabs fade helper */
  #tabs.loading-lock{ overflow:hidden; }

  #tabs.loading-fade{ opacity:0; transition:opacity .12s; }

  /* 좁혀 표시(내체표 일부) */
  body:not(.chips-overflow) #tabs[data-ctx="nae"] .tabs-card.shrink-1-2{
    width:66%; display:block; margin:0 auto 28px;
  }