/* 허브 누리집 공통 모양 (2026-10-22 일곱 쪽으로 늘리며 한 벌로 묶음)
 *
 * ★ 바탕은 NotaryAI 앱과 같은 토큰이다(NotaryWeb `web/app/globals.css` 맨 위) - 누리집에서 앱으로
 *   넘어가도 같은 집으로 보이게. 다만 글자 크기는 앱(전문가 반복 화면, 본문 13px)이 아니라
 *   처음 오는 사람이 읽는 쪽이라 대민 기준으로 키웠다(KRDS 본문 15-19px).
 * ★★★ 색은 라이트 한 벌만 쓴다. 다크를 반쯤 지원하면 회색 글자가 생기고, 전역 규칙이 그것을
 *   금한다(대비 7:1). 바탕과 글자를 명시적으로 칠한다.
 * ★★ 남색(--점)은 누르는 것·고른 것에만 쓴다(앱 globals.css 「상호작용 계열」). 제목을 칠하지 않는다.
 * ★ 좁은 화면이 기본값이다 - 넓은 화면 규칙을 미디어 쿼리 안에 둔다(NotaryWeb CLAUDE.md 화면 규칙). */
:root{
  --바탕:#faf8f4;      /* 앱 --bg 공증용지 미색 */
  --면:#ffffff;        /* 앱 --surface */
  --면연:#f3f0e9;      /* 앱 --surface-2 */
  --테:#e8e3d8;        /* 앱 --border */
  --테진:#d6cfc0;      /* 앱 --border-strong */
  --먹:#1c1a16;        /* 앱 --ink - 바탕 16.4:1 */
  --먹연:#4b4639;      /* 앱 --ink-muted - 면연 위 8.2:1. 이보다 옅게 쓰지 않는다 */
  --점:#1f3a5f;        /* 앱 --accent - 누르는 것에만 */
  --점연:#e7edf5;
  --주의:#6b4500;      /* 주의연 위 7.8:1 */
  --주의연:#fdf4e3;
  --틀림:#8b1a1a;
  --틀림연:#fdeaea;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Noto Sans KR",-apple-system,"Segoe UI","Malgun Gothic",system-ui,sans-serif;
  color:var(--먹); background:var(--바탕);
  line-height:1.75; font-size:16px; letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all; overflow-wrap:anywhere;
}
a{color:var(--점)}
.감{max-width:1080px; margin:0 auto; padding:0 16px}
.좁{max-width:760px; margin:0 auto; padding:0 16px}

/* ── 머리 ─────────────────────────────────────────── */
header{background:var(--면); border-bottom:1px solid var(--테); position:sticky; top:0; z-index:10}
/* 좁으면 [로고 ... 단추] 아래에 메뉴가 둘째 줄로 내려앉아 접힌다(가로 넘침 없이 줄바꿈).
   넓으면(1000px~) 메뉴가 로고 옆 한 줄로 올라온다 - 아래 미디어 쿼리. */
header .감{display:flex; flex-wrap:wrap; align-items:center; gap:0 12px; padding-top:10px; padding-bottom:6px}
.로고{order:1; font-weight:700; font-size:18px; letter-spacing:-0.02em; text-decoration:none; color:var(--먹); white-space:nowrap; line-height:36px}
.로고 span{color:var(--점)}
.머리단추{order:2; margin-left:auto; display:flex; gap:8px; align-items:center}
/* ★ 폰(390px)에서 여섯이면 「문의」 하나만 둘째 줄로 떨어졌다(2026-10-22 찍어 봄). 「장부는 사무소에」는 첫 화면 안의
     절로 가는 고리라 좁을 때만 메뉴에서 빼서(.넓을때) 다섯이 한 줄에 들게 한다 - 그 절은 첫 화면에 그대로 있다. */
nav.메뉴{order:3; flex-basis:100%; display:flex; flex-wrap:wrap; gap:0 16px; font-size:14px; padding-top:4px}
nav.메뉴 .넓을때{display:none}
nav.메뉴 a{text-decoration:none; color:var(--먹연); padding:4px 0}
nav.메뉴 a:hover{color:var(--점)}
nav.메뉴 a[aria-current="page"]{color:var(--점); font-weight:700; text-decoration:underline; text-underline-offset:6px}

/* ── 단추 ─────────────────────────────────────────── */
.단추{display:inline-block; padding:12px 22px; border-radius:8px; font-size:15px; font-weight:700;
      text-decoration:none; background:var(--점); color:#fff; border:1px solid var(--점); cursor:pointer;
      font-family:inherit; text-align:center; line-height:1.4}
.단추.빈{background:var(--면); color:var(--점)}
.단추.작{padding:7px 12px; font-size:14px}
.단추:disabled{opacity:.55; cursor:default}
.단추줄{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.가운데 .단추줄{justify-content:center}

/* ── 첫머리·절 ───────────────────────────────────── */
.첫{padding:48px 0 40px}
.첫 h1{font-size:clamp(28px,5vw,44px); font-weight:700; line-height:1.32; letter-spacing:-0.035em; margin-bottom:16px}
.첫 .딸림{font-size:17px; color:var(--먹연); max-width:640px}
.가운데{text-align:center}
.가운데 .딸림{margin:0 auto}
.쪽머리{padding:40px 0 8px}
.쪽머리 h1{font-size:clamp(26px,4vw,34px); font-weight:700; letter-spacing:-0.03em; margin-bottom:8px}
.쪽머리 p{color:var(--먹연); font-size:16px}

section{padding:48px 0; scroll-margin-top:96px}
section + section{border-top:1px solid var(--테)}
section.연{background:var(--면연)}
.절머리{margin-bottom:28px}
.절머리 h2{font-size:clamp(22px,3vw,28px); font-weight:700; letter-spacing:-0.03em; margin-bottom:6px}
.절머리 p{color:var(--먹연)}
h3.소{font-size:18px; font-weight:700; margin:32px 0 12px; letter-spacing:-0.02em}
h3.소:first-child{margin-top:0}

/* ── 카드 ─────────────────────────────────────────── */
/* ★ 나란히 선 카드는 키가 같아야 한다 - 격자에 align-items 를 걸지 않는다(stretch 기본값, 전역 규칙). */
.격자{display:grid; grid-template-columns:1fr; gap:14px}
.카드{background:var(--면); border:1px solid var(--테); border-radius:12px; padding:22px 20px}
.카드 h3{font-size:17px; font-weight:700; margin-bottom:8px; letter-spacing:-0.02em}
.카드 p,.카드 li{font-size:15px; color:var(--먹연)}
.카드 b{color:var(--먹)}
.카드.굵{border:2px solid var(--점)}
.꼬리표{display:inline-block; font-size:13px; font-weight:700; color:var(--먹); background:var(--면연);
        border:1px solid var(--테); border-radius:999px; padding:1px 10px; margin-bottom:10px}
ul.점목{margin:8px 0 0 20px}
ul.점목 li{margin:4px 0}
ol.차례{margin:8px 0 0 22px}
ol.차례 li{margin:6px 0}

/* 걸음 - 번호 동그라미 */
.걸음{display:flex; gap:14px; margin-bottom:22px; align-items:flex-start}
.걸음 .수{flex:0 0 32px; height:32px; line-height:32px; text-align:center; border-radius:50%;
          background:var(--먹); color:#fff; font-weight:700; font-size:14px}
.걸음 .속{flex:1; min-width:0; padding-top:2px}
.걸음 h4{font-size:17px; font-weight:700; margin-bottom:4px; letter-spacing:-0.02em}
.걸음 p{color:var(--먹연)}
.걸음 .때{display:inline-block; font-size:13px; font-weight:700; color:var(--먹); margin-left:6px}

/* ── 상자 ─────────────────────────────────────────── */
.주의{background:var(--주의연); border-left:3px solid var(--주의); border-radius:0 8px 8px 0;
      padding:14px 18px; margin:16px 0; font-size:15px; color:var(--주의); line-height:1.7}
.주의 b{color:var(--주의)}
.네모{background:var(--면); border:1px solid var(--테); border-radius:10px; padding:14px 18px; margin:16px 0;
      font-size:15px; color:var(--먹연)}
.네모 b{color:var(--먹)}
/* 아직 정하지 않은 값 - 주인님이 정하시면 채운다. 회색으로 흐리지 않고 테두리로 말한다. */
.준비중{display:inline-block; border:1px dashed var(--테진); border-radius:6px; padding:0 8px; font-size:14px;
        font-weight:700; color:var(--먹); background:var(--면)}
.이름{display:inline-block; background:var(--면연); border:1px solid var(--테); border-radius:6px; padding:0 8px;
      font-weight:700; color:var(--먹); font-size:14px; letter-spacing:0}

/* ── 표 ───────────────────────────────────────────── */
.넘침{overflow-x:auto}
table.표{border-collapse:collapse; width:100%; margin:12px 0; font-size:15px; background:var(--면)}
table.표 th,table.표 td{border-bottom:1px solid var(--테); padding:10px 12px; text-align:left; vertical-align:top; line-height:1.6}
table.표 th{background:var(--면연); font-weight:700; white-space:nowrap}
table.표 td:first-child{font-weight:700}
.덧{display:block; color:var(--먹연); font-size:14px; margin-top:2px; font-weight:400}

/* ── 묻고 답하기 ─────────────────────────────────── */
details.물음{background:var(--면); border:1px solid var(--테); border-radius:10px; padding:0 18px; margin-bottom:10px}
details.물음 summary{cursor:pointer; font-weight:700; padding:14px 0; list-style:none}
details.물음 summary::-webkit-details-marker{display:none}
details.물음 summary::before{content:"+"; display:inline-block; width:20px; color:var(--점); font-weight:700}
details.물음[open] summary::before{content:"-"}
details.물음 .답{padding:0 0 16px 20px; color:var(--먹연); font-size:15px}
details.물음 .답 b{color:var(--먹)}

/* ── 신청서 ───────────────────────────────────────── */
/* ★ 칸 이름은 칸 위 작은 글로 둔다 - 처음 오는 사람이 쓰는 대민 서식이라 앱(칸 안 placeholder)과 다르다
 *   (KRDS·Wroblewski: 위 라벨이 가장 빠르다). 왼쪽 라벨은 쓰지 않는다. */
.신청{max-width:560px}
.줄칸{margin-bottom:16px}
label.이름표{display:block; font-size:14px; font-weight:700; margin-bottom:6px}
label.이름표 small{font-weight:400; color:var(--먹연)}
.신청 input,.신청 textarea{width:100%; padding:12px 14px; border:1px solid var(--테진); border-radius:8px;
  font-family:inherit; font-size:16px; color:var(--먹); background:var(--면)}
.신청 input:focus,.신청 textarea:focus{outline:2px solid var(--점); outline-offset:-1px; border-color:var(--점)}
.숨칸{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.동의{background:var(--면); border:1px solid var(--테); border-radius:10px; padding:14px 16px; font-size:14px;
      color:var(--먹연); line-height:1.7; margin-bottom:12px}
.동의 b{color:var(--먹)}
label.확인{display:flex; gap:10px; align-items:flex-start; font-size:15px; margin-bottom:16px; cursor:pointer}
label.확인 input{width:auto; margin-top:6px}
.신청 .단추{width:100%}
.알림{margin-top:14px; padding:14px 16px; border-radius:8px; font-size:15px; display:none}
.알림.됨{display:block; background:var(--점연); color:var(--점)}
.알림.안됨{display:block; background:var(--틀림연); color:var(--틀림)}

/* 가입 뒤 열쇠 상자 */
.열쇠상자{display:none; background:var(--면); border:2px solid var(--점); border-radius:12px; padding:22px 20px; margin-top:8px}
.열쇠상자.보임{display:block}
.열쇠상자{scroll-margin-top:120px}   /* 붙박이 머리 줄 밑으로 상자 윗머리가 숨지 않게 */
.열쇠상자 h3{font-size:18px; margin-bottom:8px}
.열쇠{font-family:Consolas,"D2Coding",monospace; font-size:20px; font-weight:700; letter-spacing:0.04em;
      background:var(--면연); border:1px solid var(--테); border-radius:8px; padding:8px 12px; display:inline-block; margin:6px 0 12px}

/* ── 꼬리 ─────────────────────────────────────────── */
footer{border-top:1px solid var(--테); padding:28px 0 36px; font-size:14px; color:var(--먹연); background:var(--면)}
footer .감{display:flex; flex-direction:column; gap:10px}
footer .꼬리줄{display:flex; flex-wrap:wrap; gap:6px 16px}
footer a{color:var(--먹연)}

/* ── 넓은 화면 ────────────────────────────────────── */
@media (min-width:720px){
  .감,.좁{padding:0 24px}
  body{font-size:17px; line-height:1.8}
  .첫{padding:80px 0 64px}
  .첫 .딸림{font-size:19px}
  .쪽머리{padding:56px 0 12px}
  section{padding:72px 0}
  .절머리{margin-bottom:36px}
  .격자.둘{grid-template-columns:repeat(2,1fr)}
  .격자.셋{grid-template-columns:repeat(3,1fr)}
  .카드{padding:26px 24px}
  nav.메뉴 .넓을때{display:inline}
}
@media (min-width:1000px){
  header .감{flex-wrap:nowrap; min-height:66px; padding-top:0; padding-bottom:0}
  nav.메뉴{order:2; flex-basis:auto; margin-left:28px; padding-top:0; gap:0 22px; font-size:15px}
  .머리단추{order:3}
}
.그림{margin:14px 0 18px}
.그림 img{display:block;max-width:100%;height:auto;border:1px solid var(--테);border-radius:10px}
.그림 figcaption{margin-top:6px;font-size:14px;color:var(--먹연)}