/* 기회담 전 페이지 글씨·창 크기 통일 토큰 · 2026-09-29
사용자 요청: "각 페이지별로 글씨와 창의 크기가 다릅니다. 통일".
소유: 디자인시스템 담당(이 파일만). app.js·account.html·기존 CSS는 수정하지 않는다.
로드 위치: index.html 은 access-ui-20260929.css 다음(마지막 ), account.html 은 account-polish-20260929.css 다음(마지막 ).
원칙
1) 값은 전부 :root 토큰(--gh-*)으로 두고, 선택자는 토큰만 참조한다. 새 페이지는 토큰만 쓰면 같은 크기가 된다.
2) 우선순위는 !important 가 아니라 특이도로 얻는다. 기존 규칙이 `html[data-palette] #main .x h1`(id 1개) 형태라
본 파일은 `#app #main …`(id 2개)로 적고 마지막에 로드한다. 회원 페이지는 기존 규칙이 `#login-panel` 등 id 특이도라
`:is(#login-panel, …, section)` 로 같은 급을 맞춘다.
3) !important 는 기존 CSS 가 이미 !important 로 크기를 박아 둔 곳(§9, 총 4 규칙)만 같은 값으로 상쇄한다.
4) 공통 그리드: 셸 1400 · 거터 32/24/16 · 본문 열 1024 · 우측 레일 280 · 열 간격 32.
탐색+레일, 상품+레일 페이지는 [본문 1024 | 레일 280], 회원 단일 페이지는 레일 없이 같은 본문 열 1024 를 가운데 둔다.
본문 열 안의 히어로·패널·카드는 열 폭을 그대로 쓰므로 페이지가 달라도 "창" 폭이 같다.
5) 색·이미지·모션·문구는 건드리지 않는다. 폰트 다운로드 없음(기존 Pretendard 스택 그대로).
6) 예외(의도적으로 통일하지 않음): 소셜 로그인 버튼 [data-provider](공급자 공식 규격, 가입 담당 소유), 상단바 알약(.access-pill, UX 담당 소유),
내 조건 선택지 .option(카드형 선택지), 하단 모바일 내비. */
/* ───────────── 1. 토큰 ───────────── */
:root{
/* 글자 — 위계 6단계. 12px 미만은 쓰지 않는다 */
--gh-h1:32px; --gh-h1-lh:1.3; --gh-h1-fw:750; --gh-h1-ls:-0.02em; /* 페이지 제목 (한 페이지에 하나) */
--gh-h2:22px; --gh-h2-lh:1.4; --gh-h2-fw:700; --gh-h2-ls:-0.015em;/* 섹션 제목 */
--gh-card-title:20px; --gh-card-title-lh:1.4; /* 큰 카드(상품·안내) 제목 */
--gh-rail-title:16px; --gh-rail-title-lh:1.5; /* 레일 카드 제목 */
--gh-lead:16px; --gh-lead-lh:1.65; /* 히어로 리드 문단 */
--gh-body:14px; --gh-body-lh:1.7; /* 본문 */
--gh-sub:13px; --gh-sub-lh:1.6; /* 보조 설명·힌트·메타 */
--gh-meta:12px; --gh-meta-lh:1.5; /* 최소 크기(뱃지·작은 라벨) */
--gh-eyebrow:13px; --gh-eyebrow-ls:0.02em; /* 키커(작은 상단 라벨) */
/* 조작 요소 */
--gh-btn-h:44px; --gh-btn-r:10px; --gh-btn-fs:14px; --gh-btn-fw:600; --gh-btn-px:18px;
--gh-input-h:44px; --gh-input-r:10px; --gh-input-fs:15px;
/* 창(면) */
--gh-card-r:16px; --gh-card-pad:22px; /* 목록 카드·상품 카드·레일 카드 */
--gh-panel-r:20px; --gh-panel-pad:28px; /* 히어로·큰 패널(내 조건·약관·광고·가이드·회원 패널·빈 상태) */
--gh-rail-pad:18px;
--gh-popup-w:400px; --gh-popup-r:20px; /* 우측 하단 상담 창 등 떠 있는 창 */
/* 공통 그리드 */
--gh-shell-max:1400px; --gh-gutter:32px;
--gh-col-main:1024px; --gh-col-rail:280px; --gh-col-gap:32px;
}
@media (max-width:1279px){:root{--gh-h1:30px;--gh-gutter:28px}}
@media (max-width:899px){:root{--gh-h1:28px;--gh-gutter:24px;--gh-panel-pad:24px}}
@media (max-width:540px){:root{
--gh-h1:26px;--gh-h2:20px;--gh-card-title:18px;--gh-lead:15px;--gh-gutter:16px;
--gh-input-fs:16px; /* iOS 자동 확대 방지 */
--gh-card-r:14px;--gh-card-pad:18px;--gh-panel-r:16px;--gh-panel-pad:20px;
--gh-popup-w:calc(100vw - 32px);
}}
@media (max-width:359px){:root{--gh-h1:24px;--gh-h2:19px;--gh-card-title:17px}}
/* ───────────── 2. 공통 그리드(셸·거터·열) ───────────── */
#app .top-inner,
#app .workspace{max-width:var(--gh-shell-max);padding-left:var(--gh-gutter);padding-right:var(--gh-gutter)}
/* 본문+레일: 본문 열은 남는 폭을 쓰고 레일은 280 고정, 열 간격 32. 1279 이하는 기존대로 레일이 접혀 단일 열 */
@media (min-width:1280px){
#app .workspace{grid-template-columns:minmax(0,1fr) var(--gh-col-rail);column-gap:var(--gh-col-gap)}
}
/* 회원 단일 페이지: 상단바는 같은 셸, 본문은 레일 없이 같은 본문 열(1024)을 가운데 */
body.design-account .account-top-inner{max-width:var(--gh-shell-max);padding-left:var(--gh-gutter);padding-right:var(--gh-gutter)}
body.design-account main.member-main{max-width:calc(var(--gh-col-main) + var(--gh-gutter) * 2);padding-left:var(--gh-gutter);padding-right:var(--gh-gutter);margin-left:auto;margin-right:auto}
/* ───────────── 3. 제목 위계 ───────────── */
#app #main h1,
body.design-account main.member-main :is(.account-hero, section, div) h1{
font-size:var(--gh-h1);line-height:var(--gh-h1-lh);font-weight:var(--gh-h1-fw);letter-spacing:var(--gh-h1-ls);text-wrap:balance;max-width:none}
/* 섹션 제목: 본문 열 안의 h2 */
#app #main h2,
body.design-account main.member-main :is(#login-panel, #member-panel, #unsubscribe-panel, #withdrawal, section, .account-hero) h2{
font-size:var(--gh-h2);line-height:var(--gh-h2-lh);font-weight:var(--gh-h2-fw);letter-spacing:var(--gh-h2-ls)}
/* 큰 카드 제목(상품 카드·가이드 카드·빈 상태) */
#app #main :is(.sv-card, .sales-card, .design-empty, .empty, .g26-card, .growth-partner, .growth-closing) h2{
font-size:var(--gh-card-title);line-height:var(--gh-card-title-lh);font-weight:var(--gh-h2-fw)}
/* 레일 카드 제목·안내 배너 제목 */
#app .workspace > .right-rail h2,
#app #main :is(.rail-card, .rail-profile, .match-banner, .sv-promo-slide) h2{
font-size:var(--gh-rail-title);line-height:var(--gh-rail-title-lh);font-weight:var(--gh-h2-fw);letter-spacing:0}
/* 홈 여정 타일 제목은 타일 폭에 종속 — 12px 하한만 보장 */
#app #main .editorial-journey h2{font-size:max(var(--gh-meta), 1em)}
@media (max-width:540px){#app #main .editorial-journey h2{font-size:var(--gh-meta)}}
/* ───────────── 4. 본문·리드·보조 ───────────── */
#app #main p,
body.design-account main.member-main :is(#login-panel, #member-panel, #unsubscribe-panel, #withdrawal, section, div, form, fieldset) :is(p, label, legend, li),
body.design-account main.member-main > :is(#login-panel, p){
font-size:var(--gh-body);line-height:var(--gh-body-lh)}
/* 히어로 리드 문단 */
#app #main :is(.hero, .discovery-copy, .editorial-page-copy, .sv-hero, .growth-hero, .visual-hero, .sv-detail-head, .sales-hero-copy, .g26-header) > p,
#app #main :is(.discovery-copy, .editorial-page-copy) p,
body.design-account main.member-main :is(#login-panel, .account-hero) > p{
font-size:var(--gh-lead);line-height:var(--gh-lead-lh)}
/* 보조: 힌트·메타·푸터·상태 문구 */
#app #main :is(.hint, .results-meta, .card-details, .card-footer, .footer, .profile-caption, .sv-local-note, .growth-hero-foot, .filter-note, .d26-filter-note, .preview-status) ,
#app #main :is(.hint, .results-meta, .card-details, .footer, .rail-card, .rail-note) :is(p, small, li),
#app #main small,
body.design-account main.member-main :is(#login-panel, #member-panel, #unsubscribe-panel, #withdrawal, section, div, form, fieldset) :is(.hint, small, #provider-status, #session-label, #mail-status, #saved-status, #catalog-status){
font-size:var(--gh-sub);line-height:var(--gh-sub-lh)}
/* 키커(작은 상단 라벨) */
#app #main :is(.eyebrow, .sv-mini-label, .editorial-kicker, .g26-kicker, .growth-kicker),
body.design-account :is(#login-panel, main.member-main) :is(#login-panel, .member-kicker, .account-kicker){
font-size:var(--gh-eyebrow);line-height:1.5;letter-spacing:var(--gh-eyebrow-ls);font-weight:600}
/* 12px 하한: 광고 안내 등에서 10.8px 로 내려간 보조 문구 */
#app #main :is(.ad-note, .ad-meta, .ad-chip, .badge, .card-top, .nav-count, .sv-paid, .ad-label, .editorial-visual-label){font-size:var(--gh-sub);line-height:var(--gh-sub-lh)}
#app #main :is(.ad-section, .ad-page) :is(small, .hint, .ad-help, .ad-sub){font-size:var(--gh-sub);line-height:var(--gh-sub-lh)}
/* 10~11px 로 내려간 작은 키커·라벨(내 조건 배너, 상품 섹션 키커, 카드 미리보기 라벨, '최근 게시') → 12px 하한 */
#app #main :is(.editorial-profile-banner, .product-section-heading) > div > span,
#app #main :is(.product-preview-label, .d26-new){font-size:var(--gh-meta);line-height:var(--gh-meta-lh)}
/* ───────────── 5. 버튼 ───────────── */
#app #main :is(.primary, .secondary, .g26-button, .bench-btn, .editorial-cta, .more, .rail-contact, .mobile-inline-contact, .sv-card-cta, .growth-text-link, .d26-button, .support-launcher, .subtle-link, button:not([class]):not([aria-pressed])),
#app .topbar :is(.ad-top-inquiry.button, .top-button),
body.design-account main.member-main :is(#login-panel, #member-panel, #unsubscribe-panel, #withdrawal, section, div, form) :is(button:not([data-provider]), .button, a.button, .account-button),
body.design-account .account-top-actions a{
min-height:var(--gh-btn-h);height:auto;padding-top:10px;padding-bottom:10px;padding-left:var(--gh-btn-px);padding-right:var(--gh-btn-px);
border-radius:var(--gh-btn-r);font-size:var(--gh-btn-fs);font-weight:var(--gh-btn-fw);line-height:1.3;
display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
/* 텍스트 링크형 버튼은 배경 없이 높이만 맞춘다(패딩 좌우 유지) */
#app #main :is(.growth-text-link, .subtle-link){padding-left:0;padding-right:0;border-radius:0}
#app #main .bench-btn svg{width:18px;height:18px}
/* 검색 버튼·저장 아이콘 버튼은 정사각 44 */
#app #main :is(.search button, .save-button){width:var(--gh-btn-h);height:var(--gh-btn-h);min-height:var(--gh-btn-h);padding:0}
/* ───────────── 6. 입력 ───────────── */
#app #main :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select),
body.design-account main.member-main :is(#login-panel, #member-panel, #unsubscribe-panel, #withdrawal, section, div, form, fieldset, label) :is(input:not([type=checkbox]):not([type=radio]), select){
min-height:var(--gh-input-h);height:var(--gh-input-h);border-radius:var(--gh-input-r);font-size:var(--gh-input-fs);box-sizing:border-box}
#app #main textarea,
body.design-account main.member-main :is(#login-panel, #member-panel, #unsubscribe-panel, #withdrawal, section, div, form, fieldset, label) textarea{
border-radius:var(--gh-input-r);font-size:var(--gh-input-fs);min-height:calc(var(--gh-input-h) * 2 + 8px)}
/* 검색창 안의 입력은 테두리가 컨테이너에 있으므로 모서리만 0 유지 */
#app #main .search input{border-radius:0;height:var(--gh-input-h)}
/* ───────────── 7. 창(카드·패널·히어로·레일·팝업) ───────────── */
/* 목록·상품 카드 */
#app #main :is(.notice-card, .sv-card, .sales-card, .suggestion-card, .guide-card, .g26-card, .journey-card){border-radius:var(--gh-card-r)}
#app #main .notice-card{padding:var(--gh-card-pad)}
#app #main .sv-card-copy{padding:var(--gh-card-pad)}
/* 큰 패널: 내 조건·약관·개인정보·광고 섹션·가이드 섹션·상세·빈 상태·회원 패널 */
#app #main :is(.profile-page, .ad-section, .g26-help, .g26-glossary, .g26-section, .design-empty, .empty, .sv-detail-head, .sv-detail-body, .sv-inquiry, .growth-partner, .growth-closing, .growth-work-copy, .d26-update),
body.design-account main.member-main :is(#login-panel, #member-panel, #unsubscribe-panel, #withdrawal, .account-card, .account-panel, .member-main > section){
border-radius:var(--gh-panel-r);padding:var(--gh-panel-pad)}
/* 히어로 면: 모서리만 패널과 같게(안쪽 여백·이미지 배치는 각 히어로 규칙 유지) */
#app #main :is(.hero, .editorial-page-hero, .discovery-hero, .sv-hero, .growth-hero, .visual-hero, .editorial-home, .g26-header),
body.design-account main.member-main .account-hero{border-radius:var(--gh-panel-r)}
/* 레일 카드 */
#app .workspace > .right-rail :is(.rail-card, .rail-note),
#app #main :is(.rail-card, .rail-note){border-radius:var(--gh-card-r)}
#app #main .rail-card:not(.editorial-rail):not(.deadline-calendar){padding:var(--gh-rail-pad)}
/* 떠 있는 상담 창 */
#app .support-panel{width:var(--gh-popup-w);max-width:var(--gh-popup-w);border-radius:var(--gh-popup-r)}
#app .support-panel :is(button, .primary, .secondary){min-height:var(--gh-btn-h);border-radius:var(--gh-btn-r);font-size:var(--gh-btn-fs)}
#app .support-panel :is(input, select){min-height:var(--gh-input-h);border-radius:var(--gh-input-r);font-size:var(--gh-input-fs)}
#app .support-panel textarea{border-radius:var(--gh-input-r);font-size:var(--gh-input-fs)}
/* ───────────── 8. 회원 페이지 나머지 정렬 ─────────────
히어로 제목 폭 제한(max-width:600px)·본문 열이 820 이던 것을 본문 열 1024 로 맞춘다. 공급자 버튼은 건드리지 않는다. */
body.design-account main.member-main .account-hero h1{max-width:none}
body.design-account main.member-main{margin-top:24px}
@media (max-width:540px){body.design-account main.member-main{margin-top:16px}}
/* ───────────── 9. 기존 !important 상쇄 (같은 값으로만) ─────────────
style.css: .sv-hero h1 30px!important(≤540), .growth-hero h1 28px!important(≤540),
.growth-section-head/.growth-partner/.growth-situation>h2/.growth-closing h2 !important,
preapp.css: html[data-palette] .growth-hero h1 !important, html[data-palette] .sv-faq h2 !important,
account-polish-20260929.css: .account-hero h1 28/26/24px!important(모바일). */
#app #main :is(.sv-hero, .growth-hero) h1,
body.design-account main.member-main .account-hero h1{
font-size:var(--gh-h1)!important;line-height:var(--gh-h1-lh)!important}
#app #main :is(.growth-section-head, .growth-situation, .sv-faq) h2,
#app #main .growth-situation > h2{
font-size:var(--gh-h2)!important;line-height:var(--gh-h2-lh)!important}
#app #main :is(.growth-partner, .growth-closing) h2{
font-size:var(--gh-card-title)!important;line-height:var(--gh-card-title-lh)!important}
/* Canonical sales components and mobile visual labels. */
#app #main .sales-card-body{padding:var(--gh-card-pad)}
#app #main .sales-hero-copy .sales-lead{font-size:var(--gh-lead);line-height:var(--gh-lead-lh)}
#app #main .editorial-visual-label{white-space:nowrap;word-break:keep-all}
@media(max-width:540px){#app #main .editorial-home h1{width:100%;max-width:100%;word-break:keep-all}}
/* Independent review round02: same roles share type; actions never cover choices. */
#app #main :is(.primary,.editorial-cta,.sales-cta){font-size:14px!important}
#app :is(.secondary,.access-aux-toggle){font-size:13px!important}
@media(max-width:767px){
#app #main .profile-page .profile-actions{position:static!important;inset:auto!important;box-shadow:none!important;margin-top:20px;padding:0;background:transparent}
#app #main .profile-page{padding-bottom:24px}
#app #main .editorial-profile-banner{height:64px;min-height:0;margin-bottom:18px;grid-template-columns:minmax(0,1fr) 72px}
#app #main .editorial-profile-banner>div:first-child{padding:10px 12px}
#app #main .editorial-profile-banner>div:first-child>span{display:none}
#app #main .editorial-profile-banner p{margin:0;font-size:13px;line-height:1.5}
#app #main .editorial-profile-banner .editorial-scene{min-height:0;height:64px}
#app #main .profile-page .progress-track{margin-bottom:20px}
#app #main .profile-page .option{min-height:76px}
#app #main .editorial-visual-label{padding:9px 7px;white-space:nowrap}
}
#app .right-rail .rail-card .primary{font-size:14px!important}
/* 기관명과 열람일을 독립 flex 항목으로 압축하지 않고 자연스럽게 줄바꿈한다. */
html[data-palette] .detail-source { display:block; line-height:1.8; overflow-wrap:anywhere; }
html[data-palette] .detail-source > svg { display:inline-block; vertical-align:-2px; margin-right:7px; }
html[data-palette] .detail-source > span { margin-left:5px; }