@charset "utf-8";
/* =============================================================================
   시안 공용 베이스 (s-base.css) · design-taste-frontend 기준
   -----------------------------------------------------------------------------
   토큰은 각 시안(s1~s5.css)의 :root 에서 덮어씁니다.
   장식용 상태 점, 스크롤 큐, 로케일 스트립, 섹션 번호 라벨은 이 베이스에 없습니다.
   ============================================================================= */

:root{
  --ink:#16181a; --ink-2:#4e545a; --ink-3:#8b9197;
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f4f5f5;
  --line:#e2e4e5; --line-2:#eeefef;
  --accent:#16181a; --accent-ink:#000; --accent-soft:#f1f2f2;
  --on-accent:#ffffff;
  --ph-bg:#e9eaea; --ph-ink:#9aa0a4;
  --r:4px;            /* 코너 반경: 시안마다 하나의 값만 사용 */
  --wrap:1200px;
  --gap-sec:64px;     /* VISUAL_DENSITY 로 시안별 조정 */
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --font-head:var(--font);
  --ease:cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
     font-size:16px;line-height:1.7;letter-spacing:-0.012em;word-break:keep-all;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,table{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.s-wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 스크롤 리빌 (MOTION 4~6 대역: transform + opacity 만) ---------- */
/* 리빌은 스크립트가 켜졌을 때만 숨깁니다. 관찰자가 동작하지 않는 환경에서도
   콘텐츠가 영영 보이지 않는 일이 없도록 html.has-reveal 로 게이트합니다. */
.has-reveal [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .62s var(--ease),transform .62s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms)}
.has-reveal [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .has-reveal [data-reveal]{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- 사진 자리 (이미지 파일 사용 불가 제약에 따른 라벨 슬롯) ---------- */
.b-ph{position:relative;background:var(--ph-bg);display:flex;align-items:center;justify-content:center;
      color:var(--ph-ink);font-size:11.5px;font-weight:600;letter-spacing:.01em;overflow:hidden;border-radius:var(--r)}
.b-ph--16x9{aspect-ratio:16/9}
.b-ph--4x3{aspect-ratio:4/3}
.b-ph--1x1{aspect-ratio:1/1}
.b-cap{position:absolute;left:8px;top:8px;background:var(--ink);color:var(--bg);
       font-size:9.5px;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:2px}

/* ---------- 메타 / 키커 ---------- */
.b-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 7px;font-size:11.5px;color:var(--ink-3);
        font-variant-numeric:tabular-nums;margin-top:7px}
.b-meta i{font-style:normal;opacity:.4}
.b-eye{display:inline-flex;align-items:center;gap:3px}
.b-eye svg{opacity:.65}
.b-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:11px;color:var(--ink-2)}
.b-kicker b{color:var(--accent);font-weight:800;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.b-kicker i{width:1px;height:9px;background:var(--line);display:inline-block}
.b-body{margin-top:7px;font-size:13.5px;color:var(--ink-2);line-height:1.75}

/* ---------- 현황 ---------- */
.b-stat{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.b-stat li{padding:15px 8px;text-align:center;border-right:1px solid var(--line-2)}
.b-stat li:last-child{border-right:0}
.b-stat .k{display:block;font-size:11.5px;color:var(--ink-2);margin-bottom:3px}
.b-stat .v{display:block;font-size:25px;font-weight:800;letter-spacing:-0.045em;line-height:1.15;font-variant-numeric:tabular-nums}
.b-stat .v em{font-style:normal;font-size:12px;font-weight:600;margin-left:1px;letter-spacing:0}
.b-stat .is-hl{background:var(--accent-soft)}
.b-stat .is-hl .v{color:var(--accent)}

.b-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.b-strip .b-dot{display:none}          /* 장식용 상태 점 금지 */
.b-strip b{color:var(--ink);font-weight:700}
.b-strip .is-hl b{color:var(--accent)}
.b-strip time{margin-left:auto;font-size:11px;color:var(--ink-3)}

.b-big .k{font-size:12px;color:var(--ink-2)}
.b-big .v{font-size:60px;font-weight:800;letter-spacing:-0.06em;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.b-big .v em{font-style:normal;font-size:17px;font-weight:700;margin-left:4px;letter-spacing:-0.02em}
.b-sub{margin-top:16px;border-top:1px solid var(--line)}
.b-sub li{display:flex;justify-content:space-between;padding:8px 0;font-size:12.5px;color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.b-sub li:last-child{border-bottom:0}
.b-sub b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.b-note{margin-top:10px;font-size:11.5px;color:var(--ink-3);line-height:1.65}

/* ---------- 사례 / 칼럼 ---------- */
.b-cards{display:grid;gap:22px}                 /* 3열 균등 카드 금지: 시안에서 1~2열만 */
.b-cards h3{margin-top:8px;font-size:16px;font-weight:700;letter-spacing:-0.03em;line-height:1.5;font-family:var(--font-head)}
.b-cards .b-kicker{margin-top:12px}

.b-rows li{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line-2)}
.b-rows li:last-child{border-bottom:0}
.b-rows .b-thumb{flex:none;width:104px}
.b-rows .b-in{flex:1;min-width:0}
.b-rows h3{margin-top:5px;font-size:15px;font-weight:600;letter-spacing:-0.03em;line-height:1.5;font-family:var(--font-head)}
.b-rows--col li{gap:12px}
.b-rows--col .b-cno{flex:none;font-size:10px;font-weight:800;color:var(--accent);letter-spacing:.06em;padding-top:5px;font-variant-numeric:tabular-nums}

.b-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.b-tiles .b-tno{display:block;margin-top:10px;font-size:10px;font-weight:800;color:var(--accent);letter-spacing:.05em}
.b-tiles .b-tcls{display:block;font-size:12px;font-weight:700;margin-top:3px}
.b-tiles .b-ttl{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-2);line-height:1.55}

.b-index li{border-bottom:1px solid var(--line-2)}
.b-index li:last-child{border-bottom:0}
.b-index a{display:flex;align-items:baseline;gap:12px;padding:13px 0;transition:padding-left .25s var(--ease)}
.b-index a:hover{padding-left:6px}
.b-index .b-no{flex:none;width:32px;font-size:11px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.b-index .b-t{flex:1;min-width:0;font-size:14.5px;font-weight:500;letter-spacing:-0.028em;line-height:1.5}
.b-index .b-x{flex:none;font-size:11.5px;color:var(--ink-2)}
.b-index .b-dt{flex:none;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.b-index--col .b-no{width:26px}

.b-feature a{display:block}
.b-feature .b-kicker{margin-top:14px}
.b-feature h3{margin-top:8px;font-size:22px;font-weight:800;letter-spacing:-0.04em;line-height:1.35;font-family:var(--font-head)}

/* ---------- 표 (행마다 위아래 두 줄 금지: 아래 한 줄만) ---------- */
.b-table{width:100%;border-collapse:collapse;font-size:13px}
.b-table th,.b-table td{padding:10px 8px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line-2)}
.b-table thead th{font-size:11px;font-weight:700;color:var(--ink-2);letter-spacing:.02em;border-bottom:1px solid var(--line);white-space:nowrap}
.b-table .b-num{font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:12px;white-space:nowrap}
.b-table .b-td{font-weight:500;letter-spacing:-0.02em}
.b-table--stat th{font-size:12.5px;color:var(--ink-2);font-weight:500}
.b-table--stat td{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.b-table--stat .is-hl td{color:var(--accent)}
.b-st{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 6px;border:1px solid var(--line);color:var(--ink-3);border-radius:2px;white-space:nowrap}
.b-st.is-done{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}

/* ---------- 리스트류 ---------- */
.b-dots li{display:flex;align-items:baseline;gap:9px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.b-dots li:last-child{border-bottom:0}
.b-dots .b-t{flex:1;min-width:0;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-dots .b-dt{flex:none;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.b-new{flex:none;font-size:9px;font-weight:800;color:var(--on-accent);background:var(--accent);border-radius:2px;padding:1px 5px}

.b-mini li{display:flex;align-items:baseline;gap:9px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:12.5px}
.b-mini li:last-child{border-bottom:0}
.b-mini b{flex:none;font-weight:700;letter-spacing:-0.02em}
.b-mini span{flex:1;min-width:0;color:var(--ink-2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-mini time{flex:none;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}

.b-record li{display:flex;gap:10px;padding:9px 0;font-size:13.5px;line-height:1.6;border-bottom:1px solid var(--line-2)}
.b-record li:last-child{border-bottom:0}
.b-record .b-no{flex:none;font-size:10px;font-weight:800;color:var(--accent);padding-top:4px;font-variant-numeric:tabular-nums}
.b-plain li{padding:7px 0;font-size:13.5px;color:var(--ink-2);line-height:1.65;border-bottom:1px solid var(--line-2)}
.b-plain li:last-child{border-bottom:0}

.b-branch li{padding:11px 0;border-bottom:1px solid var(--line-2)}
.b-branch li:last-child{border-bottom:0}
.b-branch .nm{font-size:13.5px;font-weight:700;letter-spacing:-0.02em}
.b-branch .ad{font-size:12.5px;color:var(--ink-2)}
.b-branch .hr{font-size:11.5px;color:var(--ink-3)}


.b-quick{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.b-quick a{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r);
           padding:12px 13px;font-size:13px;font-weight:600;letter-spacing:-0.02em;
           transition:border-color .2s var(--ease),background .2s var(--ease)}
.b-quick svg{display:none}            /* 아이콘 직접 그리기 금지 방침에 따라 글자만 사용 */
.b-quick a:hover{border-color:var(--accent);background:var(--accent-soft)}

/* ---------- 공용 크롬: 내비게이션 (1줄, 높이 72px 이하) ---------- */
.s-nav{border-bottom:1px solid var(--line);background:var(--bg)}
.s-nav-in{display:flex;align-items:center;flex-wrap:wrap;min-height:64px;gap:0 26px}
.s-brand{font-size:17px;font-weight:800;letter-spacing:-0.045em}
.s-brand span{margin-left:8px;font-size:9.5px;font-weight:700;letter-spacing:.18em;color:var(--ink-3)}
.s-burger{margin-left:auto;display:flex;padding:6px;margin-right:-6px}
.s-links{display:none;width:100%;order:5;border-top:1px solid var(--line-2);padding:2px 0 10px}
.s-links.is-open{display:block}
.s-links a{display:block;padding:10px 0;font-size:14.5px;border-bottom:1px solid var(--line-2)}
.s-links a:last-child{border-bottom:0}

/* ---------- 공용 크롬: 버튼 ---------- */
.s-btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
       background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);border-radius:var(--r);
       padding:13px 22px;font-size:14.5px;font-weight:700;letter-spacing:-0.02em;
       transition:transform .18s var(--ease),background .18s var(--ease)}
.s-btn:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.s-btn:active{transform:translateY(1px)}
.s-btn--line{background:transparent;color:var(--ink);border-color:var(--line)}
.s-btn--line:hover{background:var(--surface-2);border-color:var(--ink-3);color:var(--ink)}

/* ---------- 공용 크롬: 섹션 헤더 ---------- */
.s-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.s-h h2{font-size:20px;font-weight:700;letter-spacing:-0.035em;line-height:1.4;font-family:var(--font-head)}
.s-h .n{font-size:12px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.s-h .more{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--ink-3);white-space:nowrap;
           transition:color .2s var(--ease)}
.s-h .more:hover{color:var(--accent)}
.s-sec{padding:var(--gap-sec) 0}

/* ---------- 공용 크롬: 푸터 ---------- */
.s-foot{background:var(--ink);color:#a6abb0;font-size:12.5px;line-height:1.8;padding:44px 0 48px;margin-top:var(--gap-sec)}
.s-foot .fb{font-size:16px;font-weight:800;letter-spacing:-0.04em;color:#f2f3f3}
.s-foot .fb span{margin-left:8px;font-size:9.5px;font-weight:700;letter-spacing:.18em;color:#7c8288}
.s-foot nav{display:flex;flex-wrap:wrap;gap:9px 20px;padding:18px 0;margin:18px 0;
            border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.s-foot nav a{font-size:13px;color:#d2d6d9}
.s-foot nav a:hover{color:#fff}
.s-foot dl{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;margin-bottom:18px}
.s-foot dt{color:#767c82}
.s-foot dd{margin:0;color:#b6bbc0}
.s-foot .fl{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:16px}
.s-foot .fl a{font-size:12px;color:#969ca2;border-bottom:1px solid rgba(255,255,255,.2)}
.s-foot .fc{font-size:11.5px;color:#6d7379;line-height:1.75}

/* ---------- 공용 크롬: 하단 CTA (첫 화면 이후 등장) ---------- */
.s-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--bg);border-top:1px solid var(--line);
       transform:translateY(110%);visibility:hidden;transition:transform .3s var(--ease)}
.s-cta.is-on{transform:none;visibility:visible}
.s-cta .s-wrap{display:flex;align-items:center;gap:14px;padding-top:11px;padding-bottom:11px}
.s-cta .t{flex:1;min-width:0;font-size:11.5px;color:var(--ink-3);line-height:1.5}
.s-cta .t b{display:block;font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-0.025em}
body{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
/* 모바일 터치 타깃 48px 확보 + 홈 인디케이터 영역 회피 */
@media (max-width:639px){
  .s-btn{min-height:48px}
  .s-cta .s-wrap{padding-bottom:calc(11px + env(safe-area-inset-bottom,0px))}
}

@media (min-width:640px){
  .b-tiles{grid-template-columns:repeat(3,1fr)}
  .b-quick{grid-template-columns:repeat(4,1fr)}
  .b-rows .b-thumb{width:136px}
}
@media (min-width:900px){
  .s-burger{display:none}
  .s-links{display:flex!important;width:auto;order:0;margin-left:auto;gap:26px;border-top:0;padding:0}
  .s-links a{padding:0;font-size:14px;border-bottom:0;transition:color .2s var(--ease)}
  .s-links a:hover{color:var(--accent)}
  .s-nav-in{min-height:72px}
  .s-h h2{font-size:23px}
  .s-foot dl{grid-template-columns:auto 1fr auto 1fr;gap:4px 14px}
}

/* ============================================================================
   하위 페이지 공용
   ============================================================================ */
.s-crumb{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-3);padding-top:16px}
.s-crumb a:hover{color:var(--accent)}
.s-crumb .sep{opacity:.5}
.s-crumb .cur{color:var(--ink-2);font-weight:600}

.s-page{padding:16px 0 22px;border-bottom:1px solid var(--line)}
.s-page h1{font-size:25px;font-weight:800;letter-spacing:-0.045em;line-height:1.32}
.s-page .desc{margin-top:11px;font-size:14.5px;color:var(--ink-2);line-height:1.8;max-width:58ch}
.s-page .stat{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--ink-3);
              font-variant-numeric:tabular-nums}
.s-page .stat b{color:var(--ink);font-weight:700}

.s-btn--sm{padding:9px 14px;font-size:12.5px;font-weight:600;min-height:0}

.s-tabs{display:flex;gap:7px;padding:22px 0 4px}
.s-tabs button{flex:1;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);
               padding:11px 6px;font-size:13.5px;font-weight:600;color:var(--ink-2);letter-spacing:-0.02em;
               transition:border-color .18s var(--ease)}
.s-tabs button .n{display:block;font-size:11px;font-weight:600;opacity:.65;margin-top:2px;
                  font-variant-numeric:tabular-nums}
.s-tabs button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);
                                     color:var(--on-accent);font-weight:700}

.s-pager{display:flex;justify-content:center;align-items:center;gap:6px;padding:26px 0}
.s-pager button{min-width:38px;min-height:38px;border:1px solid var(--line);background:var(--surface);
                border-radius:var(--r);font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.s-pager button[aria-current="page"]{background:var(--accent);border-color:var(--accent);
                                     color:var(--on-accent);font-weight:700}

.s-note{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
        border-radius:var(--r);padding:16px 17px}
.s-note h3{font-size:14.5px;font-weight:700;letter-spacing:-0.025em;margin-bottom:10px}
.s-note li{position:relative;padding-left:13px;font-size:13.5px;color:var(--ink-2);line-height:1.75}
.s-note li + li{margin-top:6px}
.s-note li::before{content:"";position:absolute;left:0;top:12px;width:5px;height:1px;background:var(--ink-3)}
.s-note li b{color:var(--ink);font-weight:700}
.s-note .after{margin-top:12px;font-size:12.5px;color:var(--ink-3)}
.s-note .after a{color:var(--accent);font-weight:600}

/* ---------- 시술 금액 안내 ---------- */
.p-price{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.p-price .range{font-size:22px;font-weight:700;letter-spacing:-0.035em;line-height:1.4;color:var(--accent)}
.p-price ul{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-2);display:grid;gap:11px}
.p-price li{position:relative;padding-left:14px;font-size:14.5px;color:var(--ink-2);line-height:1.8}
.p-price li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:1px;background:var(--ink-3)}

/* ---------- 시술 사례 카드 ---------- */
.c-list{display:grid;gap:26px}
.c-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.c-item[hidden]{display:none}
.c-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.c-in{margin-top:14px}
.c-in h3{margin-top:6px;font-size:16px;font-weight:700;letter-spacing:-0.03em;line-height:1.5}
.c-body{margin-top:9px;font-size:14px;color:var(--ink-2);line-height:1.8}
        font-size:13px;color:var(--ink-2);line-height:1.7}
          border-bottom:1px solid var(--accent);padding-bottom:1px}

         overflow:hidden;margin-bottom:16px}
            background:var(--surface-2);border-bottom:1px solid var(--line-2);
            font-size:14px;font-weight:700;letter-spacing:-0.025em}
            border-bottom:1px solid var(--line-2)}

/* ---------- 예약 절차 ---------- */
.p-steps{display:grid;gap:10px}
.p-steps li{display:flex;gap:13px;align-items:flex-start;background:var(--surface);
            border:1px solid var(--line);border-radius:var(--r);padding:15px 16px}
.p-steps .n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--on-accent);
            font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}
.p-steps h3{font-size:14.5px;font-weight:700;letter-spacing:-0.025em}
.p-steps p{margin-top:4px;font-size:13.5px;color:var(--ink-2);line-height:1.7}

/* ---------- 여닫이 (자주 묻는 질문) ---------- */
.p-acc{border-top:1px solid var(--ink)}
.p-acc-item{border-bottom:1px solid var(--line-2)}
.p-acc-q{width:100%;display:flex;align-items:flex-start;gap:12px;text-align:left;padding:16px 2px;
         font-size:14.5px;font-weight:600;letter-spacing:-0.025em;line-height:1.55;min-height:52px}
.p-acc-q .t{flex:1;min-width:0}
.p-acc-q .mk{flex:none;position:relative;width:14px;height:14px;margin-top:6px}
.p-acc-q .mk::before,.p-acc-q .mk::after{content:"";position:absolute;background:var(--accent);
  transition:transform .2s var(--ease),opacity .2s var(--ease)}
.p-acc-q .mk::before{left:0;top:6px;width:14px;height:2px}
.p-acc-q .mk::after{left:6px;top:0;width:2px;height:14px}
.p-acc-q[aria-expanded="true"] .mk::after{transform:scaleY(0);opacity:0}
.p-acc-a{display:none;padding:0 2px 18px}
.p-acc-a.is-open{display:block}
.p-acc-a p{font-size:13.5px;color:var(--ink-2);line-height:1.85;max-width:62ch}

/* ---------- 문의 ---------- */
.q-list{display:grid;gap:14px}
.q-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.q-q{display:flex;gap:11px}
.q-q .mk{flex:none;font-size:15px;font-weight:800;color:var(--ink);line-height:1.5}
.q-q h3{font-size:15px;font-weight:700;letter-spacing:-0.03em;line-height:1.55}
.q-a{display:flex;gap:11px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2)}
.q-a .mk{flex:none;font-size:15px;font-weight:800;color:var(--accent);line-height:1.5}
.q-a .who{font-size:12px;font-weight:700;color:var(--accent);margin-bottom:4px}
.q-a .body{font-size:13.5px;color:var(--ink-2);line-height:1.85}

/* ---------- 예약 대기 게시판 ---------- */
.w-list{border-top:1px solid var(--ink)}
.w-list li{display:flex;align-items:flex-start;gap:11px;padding:14px 2px;border-bottom:1px solid var(--line-2)}
.w-list .no{flex:none;width:30px;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;padding-top:2px}
.w-list .in{flex:1;min-width:0}
.w-list .t{font-size:14px;font-weight:500;letter-spacing:-0.025em;line-height:1.55}
.w-list .t b{font-weight:700;color:var(--accent)}
.w-list .m{margin-top:5px;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.w-list .m i{font-style:normal;opacity:.5}
.w-list .st{flex:none;font-size:11px;font-weight:700;padding:2px 7px;border:1px solid var(--line);
            border-radius:2px;color:var(--ink-3);background:var(--surface);margin-top:1px}
.w-list .st.is-done{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}

/* ---------- 폼 ---------- */
.s-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.s-form h3{font-size:15px;font-weight:700;letter-spacing:-0.03em;margin-bottom:5px}
.s-form .hint{font-size:12.5px;color:var(--ink-3);margin-bottom:16px;line-height:1.7}
.s-field{margin-bottom:13px}
.s-field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.s-field input,.s-field textarea{width:100%;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r);padding:12px;font:inherit;font-size:15px;line-height:1.6;color:var(--ink);min-height:48px}
.s-field input::placeholder,.s-field textarea::placeholder{color:#8f979d}
.s-field input:focus,.s-field textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.s-field textarea{min-height:120px;resize:vertical}
.s-form .agree{font-size:12px;color:var(--ink-3);margin:4px 0 14px;line-height:1.7}
.s-form .s-btn{width:100%}

/* ---------- 칼럼 본문 ---------- */
.s-article{padding:26px 0 8px;max-width:660px}
.s-article h1{font-size:24px;font-weight:800;letter-spacing:-0.045em;line-height:1.4}
.s-article .art-meta{margin-top:14px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.s-article h2{font-size:17.5px;font-weight:700;letter-spacing:-0.035em;line-height:1.5;margin:34px 0 12px}
.s-article p{margin:0 0 16px;font-size:16px;line-height:1.9;color:#262b2f}
.s-article p.first{margin-top:22px}
.s-article .pull{margin:26px 0;padding:16px 18px;background:var(--surface);border:1px solid var(--line);
                 border-left:3px solid var(--accent);border-radius:var(--r);font-size:15px;line-height:1.8;color:var(--ink)}
.s-article .cap{margin-top:8px;font-size:12px;color:var(--ink-3);text-align:center}
.s-article .foot{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);
                 font-size:13px;color:var(--ink-3);line-height:1.75}
.s-artnav{display:grid;gap:10px;padding:24px 0 0;max-width:660px}
.s-artnav a{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);
            border-radius:var(--r);padding:14px 16px;font-size:13.5px;min-height:48px}
.s-artnav a:hover{border-color:var(--accent)}
.s-artnav .dir{flex:none;font-size:11.5px;font-weight:700;color:var(--accent)}
.s-artnav .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}

@media (min-width:640px){
  .c-list{gap:30px}
  .c-item{padding:20px}
  .p-steps{grid-template-columns:1fr 1fr}
  .s-artnav{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
  .s-page{padding:22px 0 28px}
  .s-page h1{font-size:31px}
  .s-article h1{font-size:30px}
}
.s-lead{font-size:14.5px;color:var(--ink-2);line-height:1.8;max-width:62ch;margin:-6px 0 20px}
.b-phtx{padding:0 10px;text-align:center}