/**
 * maeum.css — 웹 공용 스타일 (아스트라 maeum_web_20260923 · 2026-09-23 이식)
 * ★ 파일 내용은 글자 그대로. 단 한 줄만 바꿨다 — @font-face 를 이미 자체 호스팅 중인 Pretendard 두 벌(400·700)로.
 *   (묶음의 PretendardVariable.woff2 2MB 를 새로 더하지 않는다 · 파운더 지시 09-23)
 * ★ 랜딩·결과·대화·/pass 가 이 파일을 먼저 읽는다. 화면별 CSS 는 그 뒤에 온다.
 */
@font-face{font-family:Pretendard;font-weight:400;font-style:normal;font-display:swap;src:url('fonts/Pretendard-Regular.woff2') format('woff2')}
@font-face{font-family:Pretendard;font-weight:700;font-style:normal;font-display:swap;src:url('fonts/Pretendard-Bold.woff2') format('woff2')}
@font-face{font-family:MaeumHanja;font-style:normal;font-weight:400;src:url('fonts/MaeumHanja-subset.otf') format('opentype')}
:root{--teal:#123A44;--cream:#F7F5F0;--paper:#FFFDFA;--ink:#252C30;--muted:#606D70;--line:#D6DED9;--control:#788582;--soft:#E8EFED;--danger:#993F38;--blue:#E6EFF3;--pink:#F3E8EB;--wood:#567657;--fire:#AD6044;--earth:#8C713E;--metal:#6C7783;--water:#4D788F;--text-xl:clamp(32px,5vw,48px);--text-title:26px;--text-core:19px;--text-body:17px;--text-support:15px;--text-label:14px;--leading:1.8;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:72px;--radius-control:14px;--radius-card:24px;--shadow:0 12px 40px #123A4409;--max-width:1080px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;background:var(--cream);color:var(--ink);font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;font-size:var(--text-body);line-height:var(--leading);word-break:keep-all;overflow-wrap:break-word}h1,h2,h3,p{margin:0}h1,h2,h3{color:var(--teal);letter-spacing:-.04em;line-height:1.45}button,input,select,textarea{font:inherit}button,a,summary{touch-action:manipulation}button{cursor:pointer}a{color:var(--teal);text-underline-offset:4px}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--teal);outline-offset:4px}[hidden]{display:none!important}.m-wrap{width:min(var(--max-width),calc(100% - 40px));margin-inline:auto}.m-narrow{max-width:640px}.m-skip{position:fixed;top:-100px;left:12px;background:var(--paper);padding:12px;z-index:200}.m-skip:focus{top:8px}.m-header{border-bottom:1px solid var(--line);background:var(--cream)}.m-header-inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px}.m-brand{display:inline-flex;align-items:baseline;gap:9px;text-decoration:none;color:var(--teal);flex-shrink:0;min-height:44px}.m-brand strong{font-size:27px;letter-spacing:-.08em}.m-brand span{font-size:14px;letter-spacing:.05em}.m-nav{display:flex;gap:8px;align-items:center}.m-nav .m-button{font-size:14px}.m-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border:1px solid var(--teal);border-radius:var(--radius-control);padding:11px 20px;background:var(--teal);color:var(--paper);font-size:16px;line-height:1.5;text-decoration:none;font-weight:650;text-align:center}.m-button.secondary{background:transparent;color:var(--teal)}.m-button.small{min-height:44px;padding:9px 13px;font-size:14px}.m-button.quiet{border-color:transparent;background:transparent;color:var(--teal)}.m-button.danger{background:var(--paper);border-color:var(--danger);color:var(--danger)}.m-button:disabled{background:var(--soft);color:var(--muted);border-color:var(--line)}.m-button.full{width:100%}.m-textlink{display:inline-flex;align-items:center;min-height:44px;font-size:15px}.m-stack{display:grid;gap:24px}.m-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.m-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.m-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-card);padding:28px;box-shadow:var(--shadow);min-width:0}.m-card.soft{background:var(--soft);box-shadow:none}.m-card.flush{padding:0;overflow:hidden}.m-eyebrow{font-size:14px;font-weight:650;letter-spacing:.06em;color:var(--muted);margin-bottom:12px}.m-lead{font-size:18px;color:var(--muted);margin-top:20px;line-height:1.85}.m-support{font-size:15px;line-height:1.75;color:var(--muted)}.m-label,.m-legal{font-size:14px;line-height:1.7;color:var(--muted)}.m-page{padding-block:56px 72px}.m-page h1{font-size:var(--text-xl);margin-bottom:24px}.m-page h2{font-size:var(--text-title)}.m-page h3{font-size:20px}.m-section{margin-top:40px}.m-section-title{margin-bottom:20px}.m-section-title p{font-size:15px;color:var(--muted);margin-top:8px}.m-divider{height:1px;background:var(--line);border:0;margin:32px 0}.m-rule-list{padding:0;margin:0;list-style:none}.m-rule-list>li{padding:20px 0;border-bottom:1px solid var(--line)}.m-rule-list>li:first-child{padding-top:0}.m-rule-list>li:last-child{border-bottom:0}.m-list-link{display:flex;justify-content:space-between;gap:16px;min-height:52px;text-decoration:none;align-items:center}.m-list-link strong{font-weight:650}.m-list-link small{display:block;font-size:15px;color:var(--muted);margin-top:4px}.m-field{display:grid;gap:8px}.m-field label{font-size:16px;font-weight:650}.m-field input,.m-field select,.m-field textarea{width:100%;min-width:0;min-height:52px;border:1px solid var(--control);background:var(--paper);color:var(--ink);border-radius:12px;padding:12px 14px;font-size:17px}.m-field textarea{min-height:130px;resize:vertical}.m-field input:disabled{background:var(--soft);color:var(--muted)}.m-check{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:10px 0;font-size:15px}.m-check input{width:20px;height:20px;margin:4px 0 0;accent-color:var(--teal);flex-shrink:0}.m-alert{border-left:3px solid var(--teal);padding:16px 20px;background:var(--soft);border-radius:0 12px 12px 0;font-size:15px}.m-alert.error{border-color:var(--danger);background:#F8EFEB;color:var(--danger)}.m-status{display:inline-flex;align-items:center;gap:8px;color:var(--teal);background:var(--soft);padding:5px 12px;border-radius:30px;font-size:14px;line-height:1.6}.m-status:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}.m-status.wait{background:#F1EDE2;color:#6E592E}.m-status.expired{background:#ECEDEB;color:var(--muted)}.m-price{font-size:36px;letter-spacing:-.04em;color:var(--teal);font-weight:750;line-height:1.25}.m-dl{display:grid;grid-template-columns:minmax(92px,.8fr) minmax(0,1.5fr);gap:16px;margin:0;font-size:16px}.m-dl dt{color:var(--muted)}.m-dl dd{margin:0}.m-placeholder{background:var(--cream);border:1px dashed var(--control);border-radius:12px;padding:18px;font-size:15px;color:var(--muted)}.m-mascot{width:112px;height:132px;border:1px dashed var(--control);background:var(--soft);border-radius:46% 46% 35% 35%;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:14px;margin:auto}.m-empty{padding:36px 24px;text-align:center}.m-empty h2{margin-bottom:12px}.m-empty .m-button{margin-top:24px}.m-loader{height:3px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:20px}.m-loader:before{content:'';display:block;width:30%;height:100%;background:var(--teal);animation:m-breathe 1.8s ease-in-out infinite alternate}@keyframes m-breathe{from{transform:translateX(0);opacity:.4}to{transform:translateX(230%);opacity:.9}}.m-footer{border-top:1px solid var(--line);padding:32px 0 48px;color:var(--muted);font-size:14px}.m-footer nav{display:flex;flex-wrap:wrap;gap:0 20px;margin-bottom:20px}.m-footer a{min-height:44px;display:inline-flex;align-items:center}.m-footer p+p{margin-top:8px}.m-sheet{width:min(560px,calc(100% - 24px));max-height:90dvh;padding:28px;border:1px solid var(--line);border-radius:24px;background:var(--paper);color:var(--ink)}.m-sheet::backdrop{background:#123A4470}.m-sheet-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}.m-sheet h2{font-size:25px}.m-sheet nav{display:grid;gap:4px}.m-sheet nav a{padding:14px 4px;border-bottom:1px solid var(--line);text-decoration:none;min-height:48px}.m-sheet .m-support{margin-block:16px}.m-sheet .m-button.full{margin-top:24px}.m-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);width:max-content;background:var(--teal);color:var(--paper);padding:14px 20px;border-radius:14px;font-size:15px;z-index:150}.m-toast:empty{display:none}.m-lab{background:var(--soft);padding:12px 20px;border-bottom:1px solid var(--line);font-size:14px}.m-lab-inner{max-width:1080px;margin:auto;display:flex;gap:12px 20px;align-items:center;flex-wrap:wrap}.m-lab select{min-height:44px;border:1px solid var(--control);background:var(--paper);border-radius:8px;color:var(--ink);padding:6px;font-size:14px;max-width:100%}.m-lab label{min-height:44px;display:inline-flex;align-items:center;gap:8px}.m-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.m-swatch{padding:16px;border-radius:12px;border:1px solid var(--line);font-size:14px}.m-code{background:var(--cream);padding:12px 16px;border-radius:10px;font:14px/1.7 monospace;white-space:pre-wrap;overflow-wrap:anywhere}.m-ai{font-size:14px;line-height:1.7;color:var(--muted);margin-block:12px}.m-ai-badge{font-size:14px;font-weight:500;color:var(--muted)}.m-shared-cover{background:linear-gradient(145deg,var(--blue),var(--paper) 60%,var(--pink));padding:28px;border:1px solid var(--line);border-radius:24px;text-align:center}.m-shared-cover .m-mascot{margin:28px auto}.m-chat-head{padding:18px 0;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--cream);z-index:10}.m-chat-head h1{font-size:24px;margin:0}.m-chat-body{min-height:40vh;padding:32px 0}.m-chat-compose{display:flex;gap:10px;align-items:end;padding:16px 0}.m-chat-compose textarea{width:100%;min-height:70px;resize:vertical;border:1px solid var(--control);border-radius:14px;padding:12px;font:inherit;background:var(--paper)}.m-reference{font-size:14px;padding:18px;background:var(--soft);border-radius:12px;color:var(--teal)}
@media(max-width:640px){.m-header-inner{min-height:68px}.m-brand strong{font-size:25px}.m-brand span{font-size:14px}.m-nav{gap:0}.m-nav .m-button{padding-inline:10px}.m-page{padding-block:36px 56px}.m-page h1{font-size:32px}.m-page h2{font-size:24px}.m-grid{grid-template-columns:1fr}.m-card{padding:24px}.m-sheet{margin:auto auto 0;width:100%;max-height:90dvh;border-radius:24px 24px 0 0;padding:24px 20px calc(24px + env(safe-area-inset-bottom))}.m-lab-inner{gap:8px}.m-swatches{grid-template-columns:repeat(2,1fr)}.m-row.actions>.m-button{flex:1 1 140px}.m-dl{grid-template-columns:96px minmax(0,1fr);gap:16px 12px}.m-footer{padding-bottom:calc(32px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.m-loader:before{animation:none;transform:translateX(100%)}}
@media print{.m-header,.m-lab,.m-sheet,.m-toast,.m-button,.m-footer{display:none!important}body{background:white}.m-card{box-shadow:none}.m-ai{display:block!important}}
.m-status{justify-self:start;width:fit-content}

/* ══ 상단 내비게이션 — 아스트라 topnav.fragment.html 의 추가 스타일 (2026-09-23 이식) ══
   ★ 조각 파일(web/_topnav.html)에는 <style> 을 두지 않는다 — 화면마다 중복되지 않게 여기 한 곳에 둔다.
   ★ data-auth 는 «표시용»이다. CSS 로 인증을 판정하지 않는다(서버가 본다). */
.m-topnav{position:static;background:var(--cream);border-bottom:1px solid var(--line)}
.m-topnav .m-topnav-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;min-height:76px}
.m-topnav .m-brand{align-items:center}
.m-topnav-links{display:flex;justify-content:center;align-items:stretch;gap:8px;min-width:0}
.m-topnav-links a{display:flex;align-items:center;justify-content:center;min-height:52px;padding:12px 16px;border-bottom:3px solid transparent;font-size:15px;line-height:1.5;font-weight:500;white-space:nowrap;text-decoration:none;color:var(--muted)}
.m-topnav-links a[aria-current]{border-bottom-color:var(--teal);color:var(--teal);font-weight:750}
.m-topnav-account{display:flex;align-items:center;justify-content:flex-end;min-height:44px}
.m-topnav-account .m-button{font-size:15px;min-height:44px}
/* ★★ 2026-09-26 P3a — 비로그인이라고 «메뉴 줄을 숨기지 않는다».
   종전에는 guest 면 .m-topnav-links 를 통째로 숨겼다 — 처음 온 사람에게 갈 곳이 안 보였다.
   ★ 아스트라 v5e 가 고치라고 한 자리다(폰 두 줄 머리줄).
   ★ 감추는 것은 «계정 단추»만 이다. */
.m-topnav[data-auth="guest"] [data-member-only],
.m-topnav[data-auth="member"] [data-guest-only]{display:none}
.m-topnav[data-auth="guest"] .m-topnav-account{grid-column:3}
.m-topnav-account a[aria-current]{background:var(--soft);font-weight:750}
@media(max-width:767px){
 .m-topnav .m-topnav-inner{grid-template-columns:1fr auto;gap:0;min-height:68px}
 .m-topnav .m-brand{min-height:68px}
 .m-topnav .m-topnav-account,.m-topnav[data-auth="guest"] .m-topnav-account{grid-column:2;grid-row:1}
 .m-topnav-account .m-button{font-size:14px}
 /* ★ 09-26 — 세 칸(나 · 커플 리포트 · 이용권). 네 칸이던 적 있다 — 칸 수가 바뀌면 여기도 같이 바꾼다 */
/* ★★ 2026-09-28 P3b-1② — 링크가 셋에서 «넷»이 됐다(나·관계·커플 리포트·이용권).
   ★ repeat(3,1fr) 이면 넷째가 넘친다. 칸 너비를 글자 길이에 맞춰 나눈다(아스트라 v5e 의 값).
   ★★★ 「이용권」은 지금처럼 보이고 눌려야 한다 — 자가 그걸 본다.
     ★ 2026-10-16: 「심사 기간 동결」이라 적혀 있었으나 PG 심사가 끝나 동결은 풀렸다(파운더 확인).
       그래도 이 메뉴는 그대로 둔다 — 이용권으로 가는 길이기 때문이다. */
.m-topnav-links{grid-column:1/-1;display:grid;grid-template-columns:1fr .7fr 1.25fr .8fr;gap:0;border-top:1px solid var(--line)}
 .m-topnav-links a{min-width:0;min-height:52px;padding:10px 6px;font-size:14px}
}
/* 크게 확대한 글자는 자르지 않고 두 줄로 흘려보냅니다. */
@media(max-width:350px){.m-topnav-links a{white-space:normal;overflow-wrap:normal;word-break:keep-all;text-align:center}}
@media print{.m-topnav{display:none!important}}

/* ══ 소셜 로그인 버튼 — «앱과 같은 모양» (2026-09-26 · 파운더 지시) ══
   ★ 값은 maeum-app/src/app/auth.tsx 에서 그대로 가져왔다:
     Google  바탕 card #FFFFFF · 테두리 1px lineStrong #D8D4CC · 글자 ink #33322E   (styles:244-245)
     카카오   바탕 #FEE500 · 글자 #191600                                     (styles:246-247)
     로고 18px · 로고와 글자 사이 8px(Spacing.two) · 높이 48px 이상        (styles:235-242)
   ★★ 높이·모서리는 여기 시트의 .m-button 을 따른다(min-height 52px) — 앱의 48 보다 크니 기준을 넘는다.
   ★ 바탕이 기본 단추와 달라져서 color · border 를 함께 지정한다(기본은 청록 바탕에 흰 글자다). */
.m-social{gap:8px}
.m-social .m-social-logo{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:none}
.m-social-google{background:#FFFFFF;border:1px solid #D8D4CC;color:#33322E}
.m-social-kakao{background:#FEE500;border:1px solid #FEE500;color:#191600}
/* 누를 때만 살짝 — 두 회사 규정이 색을 바꾸는 것을 막아서 바탕은 그대로 두고 흐림만 준다. */
.m-social:hover{filter:brightness(.97)}
.m-social:active{filter:brightness(.94)}

/* ══ 머리줄 — 버튼 묶음을 «모든 폭에서» 오른쪽 끝으로 (2026-09-26 · 파운더 지시) ══
   ★★ 원인 — 머리줄 안쪽 상자가 .m-wrap 이라 최대 1080px 에 묶여 가운데 정렬된다.
     버튼은 «그 상자 안에서» 오른쪽 끝이었고(틈 0px 실측), 화면이 넓을수록 상자 밖 여백이 커졌다:
       1024폭 20px · 1280폭 100px · 1440폭 180px · 1920폭 420px ← 이게 「가운데」로 보였다.
   ★ 그래서 «머리줄만» 폭 제한을 푸고 양쪽 여백으로 바꿈. 본문은 그대로 1080 가운데다.
   ★ 본문과 줄을 맞추려면 이 줄을 지우면 된다(그러면 넓은 화면에서 다시 안쪽으로 들어온다). */
/* ★★ 선택자를 한 칸 더 올린 이유 — legacy-readability.css 에 «.m-header .m-wrap» 이 있다.
     특이도가 같고(0,2,0) 그 파일이 maeum.css 뒤에 오므로 그쪽이 이긴다.
     ★ 실측으로 밟았다 — 같은 규칙 묶음 안에서 padding 은 먹는데 width 만 안 먹었다. */
.m-header.m-topnav .m-topnav-inner{width:100%;max-width:none;margin-inline:0;padding-inline:clamp(20px,4vw,48px)}
/* 로그인 전 두 버튼 — 「로그인」 글자 단추 + 「회원가입」 청록 바탕 */
.m-topnav-account{gap:8px}
.m-topnav-account .m-button.m-signup{background:var(--teal);border-color:var(--teal);color:var(--paper);font-weight:650}
@media(max-width:400px){
 /* ★ 360px 에서 브랜드와 두 버튼이 한 줄에 들게 — 문구는 줄이지 않고 여백만 줄인다 */
 .m-topnav .m-topnav-inner{padding-inline:16px}
 .m-topnav-account{gap:6px}
 .m-topnav-account .m-button{padding-inline:10px;font-size:13px}
}

/* ══ 로그인 창 · 회원가입 창 (2026-09-26) ══
   ★ 창은 하나(dialog#m-login)고 안의 화면이 셋이다 — data-view 가 login · consent · methods.
   ★ 동의 항목 꼴은 /consent 화면과 같은 결(큰 누름 자리 · 보기 링크 오른쪽). */
.m-textlink{border:0;background:none;padding:0;font:inherit;color:var(--teal);font-weight:650;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.m-textlink:focus-visible{outline:3px solid #bc7649;outline-offset:3px}
.m-consent{margin-top:18px;display:grid;gap:6px}
.m-consent-line{display:flex;align-items:center;justify-content:space-between;gap:12px}
.m-consent-all,.m-consent-row{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:8px 0;font-size:15px;line-height:1.6;cursor:pointer}
.m-consent-all{font-weight:700;border-bottom:1px solid var(--line);margin-bottom:4px}
.m-consent input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--teal)}
.m-consent small{display:block;font-size:13px;color:var(--muted);line-height:1.6}
.m-consent-line .m-textlink{flex:none;font-size:14px;font-weight:500;color:var(--muted)}
/* ★ 필수를 다 안 켰을 때 — 누를 수 없다는 것이 보여야 한다 */
.m-auth-sheet .m-button[disabled]{opacity:.45;cursor:not-allowed}
.m-auth-sheet .m-support{margin-block:12px}

/* ══ 마음이 그림 · 안내 덩이 (2026-09-26 P3a) ══
   ★ 도형은 web/maeumi.js 한 곳에서 온다. 여기는 «크기와 배치»만 맡는다.
   ★ 아스트라 v5e 의 .maeumi/.guide 를 이름만 우리 규칙(m- 밖의 고유 이름)으로 옮겼다. */
/* ★★ 그림은 정사각 1024×1024 다 — «정사각 상자»에 담는다. 세로로 늘이지 않는다.
   ★ 동그랗게 자르기 · 색 필터 · 낮은 opacity · 혼합 모드 금지(원본 README). 부모에도 걸지 않는다.
   ★★★ 폭을 바꾸면 web/maeumi.js 의 BOX 도 같이 바꾼다 — 안 바꾸면 흐려진다(자가 센다). */
.maeumi{display:block;flex:none;width:64px;height:64px;object-fit:contain;opacity:1;mix-blend-mode:normal}
.maeumi.lg{width:124px;height:124px}
.maeumi.sm{width:48px;height:48px}
/* 말풍선 얼굴 — 전신은 40px 아래에서 얼굴이 사라진다. 듣기 자세를 잘라낸 판이다 */
.maeumi-face{display:block;flex:none;width:36px;height:36px;object-fit:contain;opacity:1;mix-blend-mode:normal}
.maeumi-guide{display:flex;gap:14px;align-items:flex-start;padding:20px 0;margin:0}
.maeumi-guide p{font-size:15px;line-height:1.85;color:var(--muted)}
/* 빈 상태 — 마음이가 주인공인 자리. 세로로 쌓고 가운데로 */
.maeumi-guide.big{flex-direction:column;align-items:center;text-align:center;gap:10px;padding:8px 0 4px}
.maeumi-name{display:block;font-size:13px;font-weight:700;color:var(--teal);margin-bottom:5px}

/* ══ 「나」 홈 (2026-09-26 P3a · /self) ══ */
.self-page .m-section-title p{margin-top:10px}
.self-past>summary{min-height:44px;display:flex;align-items:center;color:var(--teal);cursor:pointer}
.self-past-list{list-style:none;padding:0;margin:8px 0 0}
.self-past-list>li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0;border-top:1px solid var(--line);font-size:15px}
.self-past-list small{display:block;font-size:13px;color:var(--muted)}
@media(max-width:640px){.maeumi-guide{gap:12px}.maeumi-guide p{font-size:14px}.maeumi{width:56px;height:56px}.maeumi.lg{width:112px;height:112px}}

/* ══ 「나」 홈의 카드 (2026-09-26 P3a) ══
   ★ 그림은 cardImage_c990.js 가 canvas 로 그린다(1080px 폭). 여기서는 «담는 자리»만 정한다. */
.self-card{margin:0;display:grid;gap:12px;justify-items:center}
.self-card canvas{display:block;width:100%;max-width:420px;height:auto;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--paper)}
.self-card figcaption{text-align:center}
.self-card .m-button{max-width:420px}

/* ★★ 사업자 정보 한 문단 (2026-09-27) — web/_bizinfo.html 을 lib/layout.js 가 끼운다.
   ★ 화면마다 제 규칙이 있던 자리(index.html .site-footer .biz · landing.html .footer-info .biz ·
     pass.html .pass-biz)는 «더 좁은 선택자»라 그대로 이긴다. 여기 것은 «푸터가 없던 화면»의 바탕이다. */
.biz{margin:0;word-break:keep-all;line-height:1.9}
.biz b{font-weight:600;color:var(--ink)}
.biz .sep{opacity:.5;padding:0 6px}
.biz .nowrap,.biz a[href^="tel:"]{white-space:nowrap}
.m-footer .biz{margin-bottom:12px}

/* ★★★ 2026-10-14 U8 — 빈 화면이 PC 에서 허전하다.
   ★ 실측(1280px · scratch/qa_1013/d30_relations.png): 제목은 «왼쪽 끝»에 붙고
     그림·문구는 가운데에 있으며 단추만 1,040px 로 늘어나 한 화면에 세 축이 따로 논다.
   ★★ 넓은 화면에서만 한 덩이로 모은다 — 폰(700px 미만)은 한 글자도 안 바뀐다.
   ★ 빈 화면 셋(관계 · 나 · 커플)이 같은 꼴이라 한 규칙으로 쥔다. */
@media (min-width: 700px) {
  #v-noself, #v-empty, .rel-page #people-empty {
    max-width: 520px;
    margin-inline: auto;
    text-align: center;
  }
  #v-noself .m-section-title, #v-empty .m-section-title { margin-bottom: 8px; }
}

/**
 * ★★★ 2026-10-15 — 줄바꿈 다듬기 (글은 한 글자도 안 바꾼다 · 보여 주는 방식만)
 *
 * ★ 왜 — 가상 인물 리포트를 360 · 390 · 1280px 으로 그려 «실제로 그려진 줄»을 셌더니
 *   제목이 「시작은 신중하고 마무리는 / 느린 사람」(13자/5자)처럼 갈렸고(12건),
 *   본문 끝에 「… 상관 · / 정인」 같은 고아 줄이 남았다(7건). scratch/qa_1014i/before/scan.json
 *
 * ★★ balance 는 «제목»에만 — 줄 수가 적은 글에서 줄 길이를 고르게 만든다.
 *   pretty 는 «본문»에만 — 마지막 줄에 한 낱말만 남는 것을 줄인다.
 *   ★ 둘 다 모르는 브라우저는 그냥 무시한다(지금 모습 그대로). 글자·크기·색은 안 건드린다.
 * ★★★ overflow-wrap 은 anywhere → break-word 로 내렸다(위 body 규칙).
 *   anywhere 는 «칸이 좁으면 낱말 한가운데»도 끊는다. 실측으로 두 건이 그래서 났다
 *   (「궁금해진 것 / 이 있나요?」 · 「상관 · 정 / 인」). break-word 는 그 낱말 혼자서도
 *   안 들어갈 때만 끊는다 — 넘침 방어는 그대로 남는다.
 */
h1, h2, h3, h4, h5, h6,
.m-section-title, .m-empty h2, .landing, .key-line {
  text-wrap: balance;
}
p, dd, li, .m-lead, .m-support, .m-label, .m-legal, .body-copy {
  text-wrap: pretty;
}
/** ★ 가운뎃점으로 묶인 낱말 무리가 부호로 줄을 시작하지 않게 — 쓰는 자리에서 감싼다 */
.m-nowrap { white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════
 * ③ 상단 A안 — 아스트라 3차 (2026-10-16 · 파운더 지시)
 *   ★ 로고 보조 글자 삭제 · 메뉴 네 이름 짧게 · 로그인·회원가입을 «글자 링크» 꼴로.
 *   ★★ 폰에서 네 칸을 «같은 폭»으로 — 종전 1fr .7fr 1.25fr .8fr 는 「커플 리포트」가 길어서
 *     나눈 값이었다. 이름이 「커플」로 짧아졌으니 넷을 고르게 나눈다(파운더 지적 ①).
 *   ★★★ 메뉴 글자는 16px — 시안 요구(15px 이상)와 우리 최소 크기 규칙을 함께 지킨다.
 *   ★ 되돌리기 — _topnav.html 의 class 를 m-button 꼴로 되돌리고 이 덩이를 지운다.
 * ══════════════════════════════════════════════════════════════════ */
.m-topnav-a .m-topnav-links a{ font-size:16px; line-height:1.5; font-weight:600; }
.m-topnav-a .m-topnav-links a[aria-current]{ color:var(--teal); border-bottom-color:var(--teal); font-weight:700; }
.m-topnav-a .m-brand strong{ letter-spacing:-.06em; }

/* 글자 링크 — 단추 꼴을 쓰지 않는다. 누르는 자리는 44px 를 지킨다 */
.m-textbtn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0; border:0; background:none;
  color:var(--teal); font:inherit; font-size:16px; line-height:1.5; font-weight:600;
  text-decoration:none; cursor:pointer;
}
.m-textbtn:hover{ text-decoration:underline; text-underline-offset:4px; }
.m-topnav-a .m-topnav-account{ gap:0; }
.m-topnav-a .m-textbtn + .m-textbtn{ margin-left:16px; padding-left:16px; border-left:1px solid var(--line); }

@media (max-width:760px){
  /* 네 칸을 고르게 — 글자는 가운데로 */
  .m-topnav-a .m-topnav-links{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .m-topnav-a .m-topnav-links a{ justify-content:center; text-align:center; font-size:16px; padding:10px 4px; }
  .m-topnav-a .m-textbtn{ font-size:15px; }
  .m-topnav-a .m-textbtn + .m-textbtn{ margin-left:12px; padding-left:12px; }
}
@media (max-width:400px){
  .m-topnav-a .m-textbtn{ font-size:15px; }
}

/* ★ 상단 로고의 보조 글자 — 「마음 maeum」 (2026-10-16 늦게 · 파운더 지정)
 *   폰 15px · PC 16px · 굵기 500 · #5E6E73 · 「마음」과 «아랫줄 맞춤» · 사이 6px. 괄호 없음.
 *   ★★ 하단 로고(landing.html 푸터)도 같은 꼴이다 — 거기는 14px·teal 이라 크기·색만 다르다.
 *   ★★★ 13px 이하 금지선 위에 있다(폰 15px). */
/* ★★★ 두 글자의 «아랫줄»은 맞추되(align-items:baseline), 그 줄 자체는 머리줄 «세로 가운데»에 둔다.
 *   ★ 2026-10-16 — baseline 만 주었더니 폰에서 글자가 68px 상자 위쪽에 붙어
 *     오른쪽 「로그인·회원가입」보다 13px 떠 보였다(실측). 종전 규칙은 align-items:center 라 가운데였다.
 *   ★★ flex-wrap:wrap 을 함께 주는 까닭 — align-content 는 «여러 줄일 수 있는» 상자에서만 먹는다.
 *     줄은 하나지만 wrap 을 허용해야 그 한 줄을 가운데로 놓을 수 있다.
 *   ★★★ 글자가 두 줄로 쪼개지지 않게 둘 다 nowrap 으로 못박는다. */
.m-topnav-a .m-brand{ align-items: baseline; align-content: center; flex-wrap: wrap; gap: 6px; }
.m-topnav-a .m-brand strong, .m-topnav-a .m-brand span{ white-space: nowrap; }
.m-topnav-a .m-brand span{ font-size: 16px; line-height: 1.4; font-weight: 500; color: #5E6E73; letter-spacing: .02em; }
@media (max-width: 760px){
  .m-topnav-a .m-brand span{ font-size: 15px; }
}