/* 이츠밸류 「오픈 준비 중」 첫 화면 — 캔버스 「서비스 소개(랜딩) W-01」을 줄인 것 · 색 · 서체는 design.md §1 · §2 */
:root {
  --canvas: #f2ebe6; --card: #fffdfb; --soft: #f8f1ec; --line: #e5d8d0;
  --ink: #231d1a; --ink-text: #fdf8f5; --ink-mut: #bfaba1;
  --accent: #b04a30; --accent-dk: #8c3823; --mut: #6b5d56; --dim: #7d6d66; --warn: #8a6a2e;
  --shadow: 0 2px 12px rgba(35, 29, 26, .09);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--canvas); color: var(--ink);
  font-family: 'Noto Sans KR', system-ui, -apple-system, 'Malgun Gothic', sans-serif; -webkit-font-smoothing: antialiased;
  word-break: keep-all; overflow-wrap: anywhere; }   /* 한글을 낱말 중간에서 자르지 않는다 */
a { color: var(--accent); }
img { display: block; }

/* 머리글 */
.gnb { display: flex; align-items: center; gap: 16px; height: 58px; padding: 0 24px; background: var(--card); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); flex: none; }
.bname { font-weight: 800; font-size: 16px; letter-spacing: -.32px; white-space: nowrap; }
.bbar { width: 1px; height: 12px; background: var(--line); }
.ben { font: 500 11px 'IBM Plex Mono', monospace; color: var(--mut); white-space: nowrap; }
.fam-top { display: flex; gap: 8px; }
.jchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 6px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); font-weight: 700; font-size: 12.5px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.jchip:hover { background: var(--soft); color: var(--ink); }
.jchip:focus-visible, .brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 계정(로그인 v2 W-02) — 머리글 오른쪽 끝 */
.acct { margin-left: auto; position: relative; flex: none; }
.start { display: inline-flex; align-items: center; height: 34px; padding: 0 15px; border-radius: 12px; border: 1.5px solid var(--ink); background: var(--card);
  color: var(--ink); font: 700 13px 'Noto Sans KR', sans-serif; white-space: nowrap; cursor: pointer; }
.start:hover { background: var(--soft); }
.me { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; cursor: pointer; padding: 4px; border-radius: 12px; font-family: inherit; color: var(--ink); }
.me:hover { background: var(--soft); }
.ava { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--ink-text); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; flex: none; }
.ava-l { width: 40px; height: 40px; font-size: 16px; }
.me-n { font-weight: 600; font-size: 13px; max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-c { font-size: 11px; color: var(--mut); }
.me-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 290px; z-index: 30; overflow: hidden; box-shadow: 0 12px 32px rgba(35, 29, 26, .18); }
.me-menu[hidden] { display: none; }
.me-hd { display: flex; align-items: center; gap: 11px; padding: 16px; border-bottom: 1px solid #f0e6df; }
.me-hd > div > b { display: block; font-weight: 700; font-size: 14px; }
.me-hd > div > span { display: block; font-size: 12px; color: var(--mut); margin-top: 2px; }
.li { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid #f0e6df; font-weight: 500; font-size: 13.5px; color: var(--ink); text-decoration: none; }
.li:hover { background: var(--soft); color: var(--ink); }
.li .r { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--mut); }
.li-out { border-bottom: 0; color: var(--mut); }
.start:focus-visible, .me:focus-visible, .li:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 무료 회원 안내(로그인 v2 W-01 · 모바일 M-01 바텀시트) */
.dim { position: fixed; inset: 0; background: rgba(35, 29, 26, .42); z-index: 40; }
.dlg { position: fixed; left: 50%; top: 14vh; transform: translateX(-50%); width: min(400px, calc(100vw - 32px)); z-index: 41; padding: 30px 28px 24px;
  display: flex; flex-direction: column; gap: 14px; box-shadow: 0 18px 48px rgba(35, 29, 26, .28); }
.dim[hidden], .dlg[hidden] { display: none; }
.dlg h2 { margin: 0; font-weight: 800; font-size: 21px; line-height: 1.4; letter-spacing: -.5px; }
.dlg-s { margin: -6px 0 0; font-size: 13px; color: var(--mut); line-height: 1.6; }
.x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--mut);
  font: 400 22px/1 'Noto Sans KR', sans-serif; cursor: pointer; }
.x:hover { background: var(--soft); }
.grab { display: none; }
.mem { align-self: flex-start; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: rgba(176, 74, 48, .1);
  color: var(--accent-dk); font-weight: 700; font-size: 11px; white-space: nowrap; }
.mem.warn { background: rgba(138, 106, 46, .12); color: var(--warn); }
.kakao, .jbtn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; border-radius: 12px; text-decoration: none; cursor: pointer; }
.kakao { height: 52px; margin-top: 6px; background: #FEE500; color: rgba(0, 0, 0, .85); font-weight: 800; font-size: 15.5px; }
.kakao:hover { background: #f5dc00; color: rgba(0, 0, 0, .85); }
.jbtn { height: 50px; border: 1.5px solid #cbb9ae; background: var(--card); color: var(--ink); font-weight: 700; font-size: 14.5px; }
.jbtn:hover { background: var(--soft); color: var(--ink); }
.kakao:focus-visible, .jbtn:focus-visible, .x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hint { margin: 0; font-size: 12px; line-height: 1.6; color: var(--mut); text-align: center; }
.hint[hidden] { display: none; }
.hint-prev { padding: 8px 10px; border-radius: 10px; background: rgba(138, 106, 46, .12); color: var(--warn); font-weight: 600; }
.dlg hr { width: 100%; height: 1px; border: 0; background: #f0e6df; margin: 2px 0; }
.fam { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--mut); }
.fam b { font-weight: 700; color: var(--ink); }

/* 알림 한 줄 */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 50; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 14px;
  background: var(--ink); color: var(--ink-text); font-weight: 600; font-size: 13px; box-shadow: 0 10px 28px rgba(35, 29, 26, .25); }
.toast[hidden] { display: none; }

/* 홈 화면에 추가(앱 설치) 카드 — 패밀리 공통 */
.inst { position: fixed; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 35; max-width: 460px; margin: 0 auto;
  display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 14px; border-radius: 18px; background: var(--card);
  border: 1px solid var(--line); box-shadow: 0 8px 26px rgba(35, 29, 26, .22); }
.inst[hidden] { display: none; }
.inst-mark { width: 42px; height: 42px; }
.inst-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inst-tx > b { font-weight: 800; font-size: 15px; }
.inst-tx > span { font-size: 13px; color: var(--mut); }
.inst-tx > span[hidden] { display: none; }
.inst-ios { margin-top: 4px; padding: 8px 10px; border-radius: 10px; background: var(--soft); color: var(--ink) !important; }
.inst-act { grid-column: 1 / -1; display: flex; gap: 8px; }
.inst-run, .inst-later { min-height: 44px; border-radius: 12px; border: 0; font: 800 14px 'Noto Sans KR', sans-serif; cursor: pointer; }
.inst-run { flex: 1; background: var(--accent); color: #fff; }
.inst-run:hover { background: var(--accent-dk); }
.inst-run[hidden] { display: none; }
.inst-later { flex: none; padding: 0 18px; background: var(--soft); color: var(--mut); }
.inst-run[hidden] + .inst-later { flex: 1; }
.inst-pc { display: none; }
@media (min-width: 900px) {
  .inst { left: auto; right: 16px; bottom: 16px; width: 380px; margin: 0; grid-template-columns: 48px minmax(0, 1fr); }
  .inst-mark { width: 48px; height: 48px; }
  .inst .inst-pc { display: block; } .inst .inst-mo { display: none; }
}
.foot-inst { padding: 0; border: 0; background: transparent; color: var(--ink-text); font: 600 12px 'Noto Sans KR', sans-serif; text-decoration: underline; cursor: pointer; }
.foot-inst[hidden] { display: none; }
@media print { .inst, .dlg, .dim, .toast { display: none !important; } }

/* 본문 */
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 48px 32px 40px; flex: 1; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.eyebrow { margin: 0; font-weight: 500; font-size: 12.5px; color: var(--accent); }
.lat { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .1em; }
h1 { margin: 12px 0 0; font-weight: 900; font-size: 40px; line-height: 1.25; letter-spacing: -1.2px; }
.lead { margin: 14px 0 0; font-size: 15px; line-height: 1.75; color: var(--mut); }
.lead b { color: var(--ink); }
.status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.soon { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 999px; background: rgba(138, 106, 46, .12);
  color: var(--warn); font-weight: 700; font-size: 13px; white-space: nowrap; }
.status-t { font-size: 13px; color: var(--mut); }

.steps { list-style: none; margin: 0; padding: 6px 20px; }
.steps li { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-bottom: 1px solid #f0e6df; }
.steps li:last-child { border-bottom: 0; }
.code { font: 500 10.5px 'IBM Plex Mono', monospace; color: var(--accent); letter-spacing: .1em; }
.steps b { font-weight: 800; font-size: 16px; }
.steps li > span:last-child { font-size: 12.5px; line-height: 1.7; color: var(--mut); }

.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 28px; padding: 18px 22px; }
.trust div { display: flex; flex-direction: column; gap: 4px; }
.trust b { font-weight: 700; font-size: 13.5px; }
.trust span { font-size: 12.5px; line-height: 1.65; color: var(--mut); }

.family { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 14px 18px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.family-t { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.family-t b { font-weight: 700; font-size: 13px; white-space: nowrap; }
.family-t span { font-size: 12.5px; color: var(--mut); }
.family-l { margin-left: auto; display: flex; gap: 8px; flex: none; }

/* 바닥글 */
.foot { background: var(--ink); color: var(--ink-mut); }
.foot-in { max-width: 1200px; margin: 0 auto; padding: 22px 32px; font-size: 12px; line-height: 1.8; }
.foot-b { display: flex; align-items: center; gap: 8px; }
.foot-b b { color: var(--ink-text); font-weight: 800; font-size: 14px; }
.foot p { margin: 8px 0 0; }

/* 태블릿 이하 */
@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .family { flex-direction: column; align-items: flex-start; }
  .family-t { flex-direction: column; gap: 4px; }
  .family-l { margin-left: 0; }
}
/* 휴대폰 */
@media (max-width: 640px) {
  .gnb { padding: 0 16px; gap: 10px; }
  .bbar, .ben { display: none; }
  .fam-top { margin-left: auto; gap: 6px; }
  .fam-top + .acct { margin-left: 4px; }
  .me-n, .me-c { display: none; }   /* 휴대폰은 동그라미만 — 이름은 메뉴 안에 */
  .me-menu { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
  /* 무료 회원 안내 → 바텀시트(M-01) */
  .dlg { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: auto; border-radius: 22px 22px 0 0; padding: 12px 20px calc(28px + env(safe-area-inset-bottom)); gap: 12px; }
  .dlg h2 { font-size: 19px; }
  .grab { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line); align-self: center; }
  .x { top: 10px; right: 10px; }
  .wrap { padding: 28px 16px 32px; }
  h1 { font-size: 28px; letter-spacing: -.8px; }
  .lead { font-size: 14px; }
  .pc { display: none; }
  .trust { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 20px; padding: 16px 18px; }
  .foot-in { padding: 20px 16px; }
}
/* 계정 버튼까지 놓이는 휴대폰 머리글 — 칩은 마크만(이름은 aria-label), 겹침은 320 · 360 · 390 에서 확인 */
@media (max-width: 480px) {
  .gnb:has(.acct) .fam-top .jchip { gap: 0; padding: 0; width: 30px; justify-content: center; }
  .gnb:has(.acct) .fam-top .jchip span { display: none; }
}
@media (max-width: 379px) {
  .fam-top .jchip { gap: 0; padding: 0; width: 30px; justify-content: center; }   /* 좁은 휴대폰 — 마크만, 이름은 aria-label */
  .fam-top .jchip span { display: none; }
  .start { padding: 0 12px; }
}