/* ══════════════════════════════════════════════════════════════════════
북스코프 — 껍질 · 장서(藏書) 판
앞 판(서지 판)은 컨셉이 조판을 이겼다. 무엇이 실패했는지부터 적는다 —
같은 실수를 반복하지 않기 위해서다.
── 서지 판의 실패 진단 ──────────────────────────────────────────
1. 본문까지 명조로 돌렸다. 명조는 화면에서, 특히 윈도 렌더링에서
가는 획이 뭉개진다. 15px 본문·13px 표 셀을 명조로 읽는 것은
종이가 아니라 고행이다.
2. 숫자를 Courier 로 찍었다. 타자기 정서는 났지만 획이 빈약해
'고급'이 아니라 '낡음'으로 읽혔다.
3. 모서리를 0 으로 밀고 카드 액자를 걷었다. 구획이 사라지자
어디서 무엇이 시작되는지 눈이 길을 잃었다 — 직관성 하락.
4. 지면을 누런 갱지색으로 눌렀다. 탁하고 대비가 죽었다.
5. 판정 리드에 두문자(drop cap)를 놓았다. 한글에서 첫 글자를
떼어내면 단어가 쪼개진다 — "공급은"이 "공 / 급은"이 됐다.
6. 상단 바를 지면과 같은 색으로 눕혔다. 화면의 위계가 사라졌다.
── 장서 판의 원칙 ───────────────────────────────────────────────
1. 읽는 글자와 책의 글자를 나눈다.
본문 · UI · 표 Noto Sans KR — 화면에서 읽는 글자
표제 · 큰 수치 Noto Serif KR — 책의 정체성을 지는 글자
기호 · 코드 JetBrains Mono — 발급번호 · 해시 · 산식
명조는 자기가 잘하는 자리(크게, 제목으로)에만 선다.
2. 서재의 색. 상아빛 지면 위에 흰 문서, 깊은 초록 먹(장정색),
주묵(朱墨)은 장 번호와 직인에만. 검정 대신 따뜻한 흑갈.
3. 어두운 상단 띠가 화면을 액자처럼 문다 — 어디가 문서고 어디가
도구인지 눈이 바로 안다.
4. 카드는 돌아온다. 모서리 6~10px, 실선 한 겹, 그림자는 아주 얕게.
구획은 직관의 뼈대다.
5. 한글 조판 규칙은 유지한다 — 이 부분은 서지 판이 옳았다.
· 한글에 넓은 자간을 걸지 않는다 (확인서 제자 하나만 예외)
· 행간: 본문 1.75 · 큰 제목 1.4 · 표 1.65
· 산문 글줄 46자 상한 · 어절 단위 줄바꿈
· 흐린 글자색도 대비 4.5:1 이상
6. 두 벌 체계(웹 · 모바일)와 모든 넘침 방지 장치는 그대로 간다.
── 클래스 계약 ──────────────────────────────────────────────────
app.js(1,928줄) · sheets.js · cert.js 가 클래스 이름을 문자열로
찍어 낸다. 이름은 계약이므로 하나도 바꾸지 않았다.
══════════════════════════════════════════════════════════════════════ */
/* ══════════════ 0. 토큰 ══════════════ */
:root{
/* 글꼴 — 모노 스택 끝에 한글 산세리프를 세워 둔 것은 실수가 아니다.
라틴 모노에는 한글 글리프가 없어서, 없으면 브라우저가 generic
monospace 로 떨어뜨리고 한글이 고정폭 칸에 하나씩 박혀 흩어진다. */
--ff:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
--ff-d:'Noto Serif KR','Nanum Myeongjo',Batang,serif;
--ff-s:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
--ff-m:'JetBrains Mono',ui-monospace,Consolas,'Noto Sans KR','Malgun Gothic',monospace;
/* 지면 — 상아빛 위에 흰 문서. 서지 판의 갱지색을 걷고 밝힌다.
ground/paper 는 같은 상아색의 두 이름이다 — 의도된 별칭(본문 지면 ·
리포트 지면을 따로 부르기 위함)이니 하나로 합치지 않는다. */
--ground:#F3F0E7; --paper:#F3F0E7;
--panel:#FFFEFA; --panel2:#F8F6EE; --panel3:#F3F0E6; --cream:#FBF9F1;
/* 괘선 */
--line:#D8D1BE; --line2:#E3DDCD; --line3:#EEEADF; --track:#E7E2D3; --grid:#EAE6D8;
/* 먹 — 따뜻한 흑갈. 흐린 단계도 흰 문서 대비 4.5:1 이상. */
--ink:#201D15; --ink8:#28241B; --ink6:#423D2F; --ink5:#524C3C; --ink4:#615A48;
--label:#6E6754; --dim:#756D5A; --dim2:#7C745F;
--dim3:#B3AB96; /* 괘선 · 입력 안내문 전용. 본문에 쓰지 않는다. */
/* 장정색 — 깊은 초록 하나가 주인. 호박·주홍은 판정 상태에만. */
--teal:#1C5A41; --teal-d:#133F2D; --teal-m:#337057; --teal-l:#7FC29F;
--teal-t:#E8F0EA; --teal-b:#B4CEBE; --teal-w:#C8DCCF;
--amber:#8C6414; --amber-d:#6F4F0F; --amber-t:#F7F0DC; --amber-b:#DCCB9C; --amber-w:#E4D6AC;
--coral:#A33520; --coral-d:#832A19; --coral-t:#F7E9E3; --coral-b:#DABCAE; --coral-w:#E1C6B8; --coral-p:#FCF4F0;
/* 주묵과 금박 — 장 번호 · 두인 · 직인에만. seal/rubric 도 같은 주묵의
두 이름이다(직인 vs 장 번호) — 위 ground/paper 와 같은 이유로 유지한다. */
--seal:#8E2F1B; --rubric:#8E2F1B; --gold:#8A7238;
/* 어두운 상단 띠 — 장정(裝幀)의 초록 먹 */
--bar:#1E2B23; --bar-ink:#EFEDE2; --bar-dim:#A9B0A0; --bar-line:rgba(255,255,255,.14);
/* 그림자 — 두 단계만, 아주 얕게 */
--sh1:0 1px 2px rgba(32,29,21,.05);
--sh2:0 1px 2px rgba(32,29,21,.05),0 16px 40px -28px rgba(32,29,21,.35);
/* 간격 */
--v1:8px; --v2:14px; --v3:22px; --v4:34px; --v5:54px; --v6:76px;
--pad:30px;
--col:1048px;
--measure:46em; /* 산문 한 줄 상한 — 한글 약 46자 */
/* 모서리 */
--r1:6px; --r2:8px; --r3:10px;
--e1:cubic-bezier(.22,.68,.28,1);
--e2:cubic-bezier(.34,1.28,.44,1);
}
/* ══════════════ 1. 리셋 · 기본 활자 ══════════════ */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
/* 안쪽 어딘가가 넘쳐도 문서 폭이 화면을 넘지 않도록 뿌리에서 자른다.
clip 은 스크롤 상자를 만들지 않으므로 안쪽 position:sticky 가 살아 있다.
주의 — body 에 overflow-x:hidden 을 함께 두면 안 된다. html 의
오버플로가 visible 이 아니면 body 의 오버플로는 뷰포트로 전파되지
않고 body 자신에게 적용된다(CSS 명세). 그러면 body 가 스크롤
주체가 되어 window.scrollY 가 항상 0 이 되고, scrollTo · 앵커 점프 ·
풀페이지 캡처가 전부 어긋난다 — 랜딩 하단이 '보이지 않던' 실측
사고의 원인이 정확히 이것이었다. 가로 차단은 여기 clip 하나로만. */
html{overflow-x:clip}
body{
/* 지면은 단색이다. 종이결(미세 잡음 타일)을 얹어 봤고 물렸다 —
이유 둘. ① 화면 전체를 덮는 알파 타일은 페인트를 무겁게 한다.
3,700px 짜리 리포트에서 렌더 캡처가 5초 안에 끝나지 못했다(실측).
같은 그림을 SVG feTurbulence 로 그리면 더 나쁘다 — 필터가 페인트마다
재계산된다. ② 눈으로도 졌다. 64px 타일은 종이결이 아니라 규칙적인
격자무늬로 읽힌다. 질감은 배경이 아니라 카드의 그림자와 괘선으로 낸다. */
margin:0;background:var(--ground);color:var(--ink8);
font-family:var(--ff);font-size:15px;font-weight:400;
line-height:1.75;letter-spacing:-.006em;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
text-wrap:pretty;
}
/* 안쪽 도형은 지면 밖으로 나가지 않는다. 이것이 없어서 모바일에서
차트 SVG 한 장이 문서 폭을 390 에서 421 로 부풀렸다(실측). */
svg{max-width:100%}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--teal-d)}
button{font-family:var(--ff-s);cursor:pointer}
/* 제목은 본문 행간을 쓰면 줄이 떠 보인다 — 1.4 대로 조인다 */
h1,h2,h3{margin:0;font-family:var(--ff-d);font-weight:700;
line-height:1.42;letter-spacing:-.022em;color:var(--ink)}
/* 두 줄 제목의 좌우 균형. 본문은 body 의 pretty 가 맡고, 제목은 balance 다 —
짧은 줄 하나가 남아 삐죽 튀어나오는 것을 막는다. */
h1,h2,h3,.mastt,.vlead,.gtitle,.aict,.mktt{text-wrap:balance}
p{margin:0}
.hide{display:none !important}
/* 한글은 어절 단위로 끊어야 읽힌다 — 브라우저 기본은 글자 단위로 자른다 */
h1,h2,h3,.hm,.mastt,.mastsub,.vlead,.vbody,.note,.zonelead,.gtitle,.ctitle,.clead,
.landlead,.pshelp,.dscap,.dslead,.mdp,.mdul li,.bp,.blead,.cb-title,.mktt,
.pslab,.ptitle,.dssub,.bbt,.aiwt{word-break:keep-all;overflow-wrap:break-word}
/* 산문 블록의 글줄 길이 — 한글은 46자를 넘기면 눈이 다음 줄을 놓친다 */
.vbody,.note,.mdp,.mdul,.bp,.gp,.dscap,.zonelead,.pshelp,.lead{max-width:var(--measure)}
/* 표제 글꼴 — 책의 글자. 이름 · 제목 · 큰 수치에만 선다. */
.hm{font-family:var(--ff-d);font-weight:700;letter-spacing:-.014em}
/* 기호 · 수치 — 자릿수를 세로로 맞춘다 */
.mo,.mo *{font-family:var(--ff-m);font-variant-numeric:tabular-nums}
.mo{letter-spacing:0}
.num{font-variant-numeric:tabular-nums}
/* 인라인으로 박힌 라틴용 넓은 자간이 한글에 걸리면 낱자로 흩어진다 */
.mo[style*="letter-spacing"]{letter-spacing:.01em !important}
/* 라벨 — 작고 또렷하게. 한글이 섞이므로 자간은 주지 않는다. */
.lbl,.mastlbl,.mastk,.axk,.glbl,.gk,.cvk,.cwk,.corge,.samplbl,.cgk,.bindk,.kvk,
.cardhd .lbl,.sidehd .lbl,.lineagebar .lbl2,.dsno,.cb-k,.psub{
font-family:var(--ff-s) !important;font-size:11.5px;font-weight:700;
line-height:1.5;letter-spacing:0 !important;color:var(--label);
}
/* ══════════════ 2. 원자 ══════════════ */
/* 단추 — 눌러도 되는 것이 눌러도 되게 보인다 */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
height:38px;padding:0 17px;border:1px solid var(--line);border-radius:var(--r1);
background:var(--panel);font-family:var(--ff-s);font-size:13.5px;font-weight:600;
line-height:1;letter-spacing:-.008em;color:var(--ink6);
transition:border-color .16s var(--e1),background .16s var(--e1),color .16s var(--e1),
box-shadow .16s var(--e1),transform .1s var(--e1);
}
.btn:hover{border-color:var(--dim2);background:var(--panel2)}
.btn:active{transform:translateY(1px)}
.btn.pri{border-color:transparent;background:var(--teal);color:#F6F4EA}
.btn.pri:hover{background:var(--teal-d);color:#fff;box-shadow:0 3px 12px -4px rgba(28,90,65,.5)}
.btn.ink{border-color:transparent;background:var(--ink);color:var(--panel)}
.btn.ink:hover{background:#000}
.btn.lg{height:50px;padding:0 28px;font-size:15.5px}
.btn[disabled],.btn:disabled{opacity:.4;pointer-events:none;cursor:not-allowed}
.btn.pri:disabled:hover{background:var(--teal)}
/* 알약 · 칩 */
.pill{
display:inline-flex;align-items:center;height:31px;padding:0 15px;
border:1px solid var(--line);border-radius:999px;background:var(--panel);
font-family:var(--ff-s);font-size:12.5px;font-weight:500;line-height:1;
color:var(--ink5);cursor:pointer;
transition:border-color .16s var(--e1),color .16s var(--e1),background .16s var(--e1);
}
.pill:hover{border-color:var(--teal);color:var(--teal)}
.pill.on{border-color:var(--teal);background:var(--teal);color:#F6F4EA}
.chip{
display:inline-flex;align-items:center;gap:6px;height:23px;padding:0 9px;
border:1px solid var(--line);border-radius:var(--r1);background:transparent;
font-family:var(--ff-s);font-size:11px;font-weight:600;line-height:1;
color:var(--ink4);white-space:nowrap;
}
.chip.ok{border-color:var(--teal-b);background:var(--teal-t);color:var(--teal)}
.chip.warn{border-color:var(--coral-b);background:var(--coral-t);color:var(--coral-d)}
.chip.mid{border-color:var(--amber-b);background:var(--amber-t);color:var(--amber-d)}
/* 큰 판형 — 확인서 검증 배지처럼 결과를 한눈에 알려야 하는 자리(09-15) */
.chip.lg{height:38px;gap:9px;padding:0 18px;border-radius:var(--r1);font-size:15.5px;font-weight:700}
.chip.lg .dot{width:8px;height:8px;border-radius:999px;background:currentColor}
.mark{display:inline-flex;align-items:center;gap:10px}
.sep{width:1px;height:18px;background:var(--line2)}
.avatar{
display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
border-radius:999px;background:var(--line3);font-family:var(--ff-s);
font-size:12px;font-weight:700;color:var(--ink5);
}
/* 표식 — 같은 도형이 어두운 띠와 밝은 문서 양쪽에 올라간다.
svg 는 currentColor 만 쓰고, 자리에 맞는 색은 여기서 정한다. */
.lgo{flex:0 0 auto;color:var(--teal)}
/* 카드 — 구획은 직관의 뼈대다. 걷어냈다가 길을 잃었으므로 되돌린다. */
.card{border:1px solid var(--line2);border-radius:var(--r3);background:var(--panel);
box-shadow:var(--sh1);transition:border-color .2s var(--e1),box-shadow .2s var(--e1)}
.cardhd{display:flex;align-items:center;justify-content:space-between;gap:14px;
min-height:50px;padding:0 var(--pad);border-bottom:1px solid var(--line3)}
.cardft{display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:15px var(--pad);border-top:1px solid var(--line3)}
/* 빈 상태 — 아무것도 없을 때의 얼굴. 흐린 한 문장으로 끝내지 않는다.
무엇이 없는지 · 왜 없는지 · 다음에 무엇을 하면 되는지 셋을 적는다.
테두리를 점선으로 두는 것은 '아직 채워지지 않은 자리'라는 뜻이다. */
.empty{display:flex;flex-direction:column;align-items:center;gap:9px;
padding:44px 26px;border:1px dashed var(--line);border-radius:var(--r3);
background:var(--panel2);text-align:center}
.emptyt{font-family:var(--ff-d);font-size:16px;font-weight:700;line-height:1.5;
letter-spacing:-.016em;color:var(--ink5)}
.emptyp{max-width:32em;font-size:12.5px;line-height:1.85;color:var(--dim)}
.empty .btn{margin-top:5px}
/* 색 유틸 — app.js 가 판정 색을 이 이름으로 건다 */
.d-teal{color:var(--teal)} .d-amber{color:var(--amber)} .d-coral{color:var(--coral)}
.d-ink{color:var(--ink)} .d-gray{color:var(--ink5)} .d-dim{color:var(--dim)}
.b-teal{background:var(--teal)} .b-amber{background:var(--amber)}
.b-coral{background:var(--coral)} .b-gray{background:var(--dim)}
/* 반복 인라인 style 승격 — app.js/account.js 가 조립하는 문자열 안에서
같은 값이 여러 번 반복되던 것만 클래스로 올린다(09-15 정리). 전면
이관은 하지 않는다 — 계약 위험 대비 이득이 작다는 판단은 그대로다. */
.ar{text-align:right} /* 표 안 숫자 칸 */
.f0{flex:0 0 auto} /* 줄어들면 안 되는 아이콘·칩 */
.emph{font-weight:500;color:var(--ink)} /* 본문·표 안 핵심어 강조 */
.mo.cap{font-size:11.5px;color:var(--dim)} /* 모노 잔글씨 — 축 라벨·캡션 */
.mo.cap2{font-size:11px;color:var(--dim2)} /* 위보다 한 단 더 옅게 */
/* 표 — 머리에 굵은 선, 항목마다 가는 선. 장부의 뼈대는 남긴다. */
table{border-collapse:collapse;width:100%}
th{
padding:11px 14px;text-align:left;
border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line);
background:transparent;font-family:var(--ff-s);font-size:11.5px;font-weight:700;
line-height:1.5;letter-spacing:0;color:var(--ink5);white-space:nowrap;
}
td{padding:12px 14px;border-bottom:1px solid var(--line3);
font-size:13.5px;line-height:1.65;color:var(--ink6)}
tbody tr{transition:background .13s var(--e1)}
tbody tr:hover{background:var(--panel2)}
/* 숫자 칸은 줄바꿈을 막는다. 열이 늘어 표가 좁아지면 '0.62' 가 세로로
쪼개져 읽을 수 없게 된다(실측). */
.nw{white-space:nowrap}
#rep-red th.nw,#rep-red td.nw{padding-left:9px;padding-right:9px}
tr.rowlink,tr.recrow{cursor:pointer}
tr.rowlink:hover,tr.recrow:hover{background:var(--teal-t)}
/* 도서 행 — 누르면 원천 레코드가 열린다. 왼쪽 띠로 눌러도 되는 줄임을 알린다 */
tbody tr[data-work]{cursor:pointer}
tbody tr[data-work]:hover{background:var(--teal-t)}
tbody tr[data-work] td:first-child{position:relative}
tbody tr[data-work]:hover td:first-child::before{
content:'';position:absolute;left:-14px;top:0;bottom:0;width:2px;background:var(--teal)}
.tblhint{margin:0 0 10px;font-family:var(--ff-m);font-size:11.5px;color:var(--dim)}
/* 손끝 — 보이는 크기는 그대로 두고 누를 수 있는 넓이만 넓힌다.
각주 번호(16px)·닫기(24px)는 손가락(≈40px)에 한참 못 미친다. */
.xbtn,.fn{position:relative}
/* 마우스에서는 넓히지 않는다 — 각주 주변 12px 의 본문 글자까지 각주가 먹고,
커서가 글자 위에서 손 모양으로 바뀐다(재검토에서 발견). 손가락에서만. */
@media (pointer:coarse){
.xbtn::after,.fn::after{content:'';position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%)}
.xbtn::after{width:40px;height:40px}
.fn::after{width:32px;height:32px} /* 인라인이라 이웃 각주와 겹치지 않을 만큼만 */
}
/* 흐르는 표 — 잘린 표와 흐르는 표는 눈에 똑같이 보인다. 양 끝 그림자로
'아직 더 있다'를 알린다. local/scroll 배경이라 끝에 닿으면 스스로 사라진다. */
.dtable,.repmain .card,.repmain .rblk{
background-color:var(--panel);
background-image:
linear-gradient(90deg,var(--panel),rgba(255,254,250,0)),
linear-gradient(90deg,rgba(255,254,250,0),var(--panel)),
radial-gradient(farthest-side at 0 50%,rgba(32,29,21,.11),rgba(32,29,21,0)),
radial-gradient(farthest-side at 100% 50%,rgba(32,29,21,.11),rgba(32,29,21,0));
background-position:left center,right center,left center,right center;
background-size:26px 100%,26px 100%,13px 100%,13px 100%;
background-repeat:no-repeat;
background-attachment:local,local,scroll,scroll;
}
/* 건너뛰기 — 화면낭독기·키보드 사용자가 상단 띠의 단추 열 개를 지나지
않고 본문으로 바로 간다. 초점을 받기 전에는 보이지 않는다. */
.skip{position:fixed;left:12px;top:-60px;z-index:100;padding:10px 16px;
border-radius:var(--r1);background:var(--bar);color:var(--bar-ink);
font-family:var(--ff-s);font-size:13.5px;font-weight:600;
transition:top .16s var(--e1)}
.skip:focus{top:12px;color:var(--bar-ink)}
/* 입력 */
select,input,textarea{font-family:inherit}
select{
height:38px;padding:0 30px 0 12px;border:1px solid var(--line);border-radius:var(--r1);
background-color:var(--panel);font-size:13.5px;line-height:1.5;color:var(--ink);
-webkit-appearance:none;-moz-appearance:none;appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 11px center;
transition:border-color .16s var(--e1);
}
select:hover{border-color:var(--dim2)}
input[type=range]{display:block;margin:0;accent-color:var(--teal)}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
::selection{background:var(--teal-w);color:var(--ink)}
/* 스크롤바 */
.side-in,.sheet,.dpanel{scrollbar-width:thin;scrollbar-color:var(--dim3) transparent}
.side-in::-webkit-scrollbar,.sheet::-webkit-scrollbar,.dpanel::-webkit-scrollbar{width:9px}
.side-in::-webkit-scrollbar-thumb,.sheet::-webkit-scrollbar-thumb,.dpanel::-webkit-scrollbar-thumb{
border-radius:9px;background:var(--line);border:2.5px solid transparent;background-clip:content-box}
.side-in::-webkit-scrollbar-track,.sheet::-webkit-scrollbar-track,.dpanel::-webkit-scrollbar-track{background:transparent}
/* ══════════════ 3. 셸 — 어두운 상단 띠 ══════════════
장정의 초록 먹. 화면을 액자처럼 물어, 어디가 문서고 어디가 도구인지
눈이 바로 알게 한다. 서지 판에서 이것을 눕혔더니 위계가 사라졌다. */
#app{min-height:100vh;display:flex;flex-direction:column}
#app.rep{height:auto;min-height:100vh;overflow:visible;background:var(--paper)}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.top{
position:sticky;top:0;z-index:30;flex:0 0 auto;
display:grid;grid-template-columns:minmax(250px,1fr) auto minmax(185px,auto);
gap:18px;align-items:center;height:62px;padding:0 26px;
background:var(--bar);color:var(--bar-ink);
/* 안쪽 아래 1px 하이라이트 — 띠가 지면 위에 '얹힌' 두께를 만든다.
그림자를 밖으로 드리우면 지면이 눌리므로 안쪽으로만 준다. */
box-shadow:inset 0 -1px 0 rgba(255,255,255,.07);
}
.top.land{display:flex;justify-content:space-between}
.top.land .topL{flex:0 0 auto}
.topL{display:flex;align-items:center;gap:14px;min-width:0;overflow:hidden}
.topR{display:flex;align-items:center;gap:14px;justify-content:flex-end}
.top.land .topR{gap:18px}
/* 어두운 띠 위에서는 인라인으로 박힌 잉크 색이 그대로면 글자가 사라진다.
상단 바 안쪽에서만 밝은 쪽으로 되돌린다. */
.top .mark{cursor:pointer}
.top .lgo{color:var(--teal-l)}
.top .hm{font-size:19px !important;font-weight:600;letter-spacing:.01em !important;color:var(--bar-ink) !important}
.top .mo{color:var(--bar-dim) !important;letter-spacing:.16em !important}
.top .sep{background:var(--bar-line)}
.top .toptitle{
flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:500;color:var(--bar-dim) !important;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.top .chip{flex:0 0 auto;border-color:var(--bar-line);background:rgba(255,255,255,.05);color:var(--bar-dim)}
.top .chip.ok{border-color:rgba(127,194,159,.4);background:rgba(127,194,159,.12);color:var(--teal-l)}
.top .chip.warn{border-color:rgba(224,150,124,.42);background:rgba(224,150,124,.14);color:#E0967C}
.top .chip.mid{border-color:rgba(219,178,111,.42);background:rgba(219,178,111,.14);color:#DBB26F}
.top .avatar{background:rgba(255,255,255,.1);color:var(--bar-ink)}
.top .topR>a,.top .topR span>a{font-family:var(--ff-s);font-size:13.5px;color:var(--bar-dim) !important}
.top .topR>a:hover,.top .topR span>a:hover{color:var(--bar-ink) !important}
.top .btn{
height:34px;padding:0 14px;border-color:var(--bar-line);
background:rgba(255,255,255,.06);color:var(--bar-ink);font-size:12.5px;
}
.top .btn:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.12)}
.top .btn.pri{border-color:transparent;background:var(--teal-l);color:var(--bar)}
.top .btn.pri:hover{background:#95D1B1;box-shadow:none}
.top .btn svg{stroke:currentColor}
/* 로그인 상자 — 어두운 띠에서 떨어져 나온 흰 판. 안쪽만 밝게 되돌린다. */
.top .loginbox{color:var(--ink8);border-color:var(--line2) !important;
border-radius:var(--r2) !important;box-shadow:var(--sh2) !important}
.top .loginbox .mo{color:var(--label) !important;letter-spacing:0 !important}
.top .loginbox .btn{background:var(--teal);border-color:transparent;color:#fff !important}
.top .loginbox .btn:hover{background:var(--teal-d)}
.top .loginbox input{border-radius:var(--r1) !important}
/* 목차 — 단추가 열 개라 좁은 폭에서 넘친다. 그 줄 안에서만 흐른다. */
.secnav{
display:flex;align-items:center;gap:2px;justify-self:stretch;justify-content:flex-start;
min-width:0;overflow-x:auto;scrollbar-width:none;
}
.secnav::-webkit-scrollbar{display:none}
/* justify-content:center 는 넘칠 때 앞쪽을 잘라먹는다(플렉스의 알려진 함정).
가짜 요소의 auto 마진으로 만들면 남을 때만 가운데로 모인다. */
.secnav::before,.secnav::after{content:"";flex:0 0 auto;margin:auto}
.secnav button{
flex:0 0 auto;height:32px;padding:0 12px;border:none;border-radius:var(--r1);
background:transparent;font-family:var(--ff-s);font-size:13px;font-weight:500;
line-height:1;letter-spacing:-.012em;color:var(--bar-dim);white-space:nowrap;
transition:background .16s var(--e1),color .16s var(--e1);
}
.secnav button:hover{background:rgba(255,255,255,.09);color:var(--bar-ink)}
/* 지금 읽고 있는 절 — 목차가 위치 표시기를 겸한다. 열 개나 되는 단추 중
어디쯤인지 모른 채 스크롤하는 것이 이 화면의 가장 큰 미아 상태였다. */
.secnav button{position:relative}
.secnav button.cur{color:var(--bar-ink);font-weight:700}
.secnav button.cur::after{content:'';position:absolute;left:12px;right:12px;bottom:3px;
height:2px;border-radius:2px;background:var(--teal-l)}
/* 호버 문법 — 들리는 것(-2px)은 **눌러서 열리는 카드**에만. 정보 카드는
테두리 톤만 바뀐다. 어디를 눌러도 되는지 손이 먼저 알게 하는 규칙이다. */
.mvitem:hover{transform:translateY(-2px)}
.mvitem:active{transform:translateY(0)}
/* 전환 시간은 아래(5장)의 .mvitem 본 규칙에 있다 — 여기 따로 두면 같은
특이도의 뒤 규칙에 덮여 들림이 뚝 끊긴다(재검토에서 실측). */
/* 전역 내비 */
.gnav{display:flex;align-items:center;gap:24px;font-size:13.5px;font-weight:500}
.gnav a{position:relative;padding:6px 0;white-space:nowrap;color:var(--bar-dim) !important;
transition:color .16s var(--e1)}
.gnav a:hover{color:var(--bar-ink) !important}
.gnav a.on{color:var(--teal-l) !important;font-weight:700}
.gnav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
border-radius:2px;background:var(--teal-l)}
.topR .gnav{flex:0 0 auto;gap:16px;margin-right:2px;padding-left:16px;
border-left:1px solid var(--bar-line);font-size:12.5px}
/* ══════════════ 4. 랜딩 ══════════════ */
.hero{padding-top:var(--v2)}
.landcol{max-width:880px;margin:0 auto;text-align:center}
.landcol h1{
font-family:var(--ff-d);font-size:50px;line-height:1.42;
font-weight:700;letter-spacing:-.024em;color:var(--ink);
}
/* 속표지의 쌍괘선 — 표제 아래. 서지 판에서 가져온 것 중 살릴 것. */
.landcol h1::after{
content:'';display:block;width:120px;height:4px;margin:var(--v3) auto 0;
border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);
}
.landlead{margin:var(--v3) auto 0;max-width:40em;font-size:16px;line-height:1.9;
color:var(--ink5)}
.landnote{margin:var(--v3) 0 0;font-family:var(--ff-m);font-size:11.5px;color:var(--dim)}
/* 예시 */
.samples{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;
gap:9px;margin-top:var(--v3)}
.samplbl{display:flex;align-items:center;margin-right:4px}
.sampbtn{
display:flex;flex-direction:column;align-items:flex-start;gap:3px;
padding:11px 17px;border:1px solid var(--line);border-radius:var(--r2);
background:var(--panel);cursor:pointer;text-align:left;
transition:border-color .14s var(--e1),background .14s var(--e1),transform .1s var(--e1);
}
.sampbtn:hover{border-color:var(--teal-b);background:var(--teal-t)}
.sampbtn:active{transform:translateY(1px)}
.sampbtn.on{border-color:var(--teal);background:var(--teal-t)}
.sampt{font-family:var(--ff-s);font-size:13.5px;font-weight:600;line-height:1.5;
letter-spacing:-.012em;color:var(--ink)}
.samps{font-family:var(--ff-m);font-size:10.5px;line-height:1.4;color:var(--dim)}
.sampbtn.on .sampt{color:var(--teal-d)}
/* 시드 상자 (구형 · 시나리오 화면) */
.seedbox{margin-top:var(--v4);padding:22px 24px 18px;border:1px solid var(--line2);
border-radius:var(--r3);background:var(--panel);box-shadow:var(--sh1);text-align:left}
.seedbox textarea{display:block;width:100%;margin-top:var(--v2);padding:0;border:0;resize:none;
background:transparent;font-family:inherit;font-size:15.5px;line-height:1.9;
white-space:pre-wrap;color:var(--ink6);outline:none}
.seedhd{display:flex;align-items:center;justify-content:space-between}
.seedmeta{margin-bottom:16px;padding:13px 15px;border-radius:var(--r2);background:var(--panel3);
font-size:12.5px;line-height:1.85;color:var(--ink4)}
.seedft{display:flex;align-items:center;justify-content:space-between;gap:20px;
margin-top:var(--v3);padding-top:var(--v3);border-top:1px solid var(--line3)}
.seedft .btn{flex:0 0 auto;white-space:nowrap}
.seedstat{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;
font-family:var(--ff-m);font-size:11.5px;line-height:1.6;color:var(--dim)}
.seedstat i{font-style:normal;color:var(--dim3)}
.seedstat .q{color:var(--dim2)}
/* ── 기획안 입력 — 다섯 칸 ──
한 칸에 다 적게 하면 화면이 필드를 추측해야 한다. 추측이 틀리면
가제가 목차로 새고, 키워드 축의 1순위 질의어가 흔들린다. 다만
위저드로 쪼개지 않는다 — 다섯 단계가 한 화면에 다 보여야 무엇을
더 적으면 더 정확해지는지 알 수 있다. */
.landcol .planform{margin-top:var(--v4);text-align:left}
.planform{border:1px solid var(--line2);border-radius:var(--r3);background:var(--panel);
box-shadow:var(--sh1);overflow:hidden}
.pfhd{display:flex;align-items:baseline;justify-content:space-between;gap:var(--v2);
padding:16px 26px;border-bottom:1px solid var(--line3);background:var(--panel2)}
.pfhd .lbl{font-size:12.5px !important;color:var(--ink5)}
.pfhint{font-size:12.5px;color:var(--dim)}
.pfbd{padding:var(--v3) 26px}
.pfbd .drop{margin-top:0}
.pstep{padding:var(--v3) 0;border-top:1px solid var(--line3)}
.pstep:first-of-type{border-top:none}
.psthd{display:flex;align-items:flex-start;gap:12px}
.pno{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
width:23px;height:23px;margin-top:2px;border:1px solid var(--line);border-radius:999px;
background:var(--panel2);font-family:var(--ff-m);font-size:11.5px;font-weight:700;
line-height:1;color:var(--dim);
transition:background .16s var(--e1),border-color .16s var(--e1),color .16s var(--e1)}
.pstep.on .pno{border-color:var(--teal);background:var(--teal);color:#F6F4EA}
.pslabw{min-width:0}
.pslab{display:block;font-family:var(--ff-s);font-size:15.5px;font-weight:700;line-height:1.5;
letter-spacing:-.016em;color:var(--ink);cursor:pointer}
.pshelp{margin:4px 0 0;font-size:13px;line-height:1.8;color:var(--ink4)}
.psbody{margin-top:var(--v2)}
.pin,.pta,.psel{display:block;width:100%;border:1px solid var(--line);border-radius:var(--r1);
background:var(--panel);font-family:inherit;color:var(--ink);outline:none;
transition:border-color .14s var(--e1),box-shadow .14s var(--e1)}
.pin,.pta{padding:10px 13px;font-size:14.5px}
.pin{height:43px;line-height:1.5}
.pta{resize:vertical;line-height:1.85}
.pta-s{min-height:96px}
.pta-l{min-height:158px}
.psel{height:43px;padding:0 34px 0 12px;font-size:14px;line-height:1.5;cursor:pointer;
-webkit-appearance:none;-moz-appearance:none;appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 12px center}
.pin::placeholder,.pta::placeholder{color:var(--dim3)}
.pin:hover,.pta:hover,.psel:hover{border-color:var(--dim2)}
.pin:focus,.pta:focus,.psel:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-t)}
.prow{display:grid;grid-template-columns:1fr 1fr;gap:var(--v2)}
.pcell{min-width:0}
.psub{display:block;margin-bottom:7px;font-size:12.5px !important;color:var(--ink5) !important}
.psub2{margin-top:var(--v2)}
.pnote{margin:7px 0 0;font-size:12px;line-height:1.7;color:var(--dim)}
/* 오류 — 칸이 스스로 잘못을 말한다.
오류문은 도움말 자리를 **대신** 쓴다. 아래에 한 줄을 더 얹으면 양식이
출렁이고, 사용자는 방금 자기가 무엇을 눌렀는지 놓친다. 둘 다 한 줄
짜리이므로 자리를 바꿔 끼우면 높이가 변하지 않는다. */
.pstep.err .pshelp{display:none}
.pstep.err .pno{border-color:var(--coral);background:var(--coral);color:#F6F4EA}
.pstep.err .pin,.pstep.err .pta,.pstep.err .psel{border-color:var(--coral);background:var(--coral-p)}
.pstep.err .pin:focus,.pstep.err .pta:focus,.pstep.err .psel:focus{
border-color:var(--coral);box-shadow:0 0 0 3px var(--coral-t)}
.perr{display:none;align-items:flex-start;gap:7px;margin:4px 0 0;
font-size:13px;line-height:1.8;color:var(--coral-d)}
.pstep.err .perr{display:flex}
.perr::before{
content:'!';flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
width:15px;height:15px;margin-top:4px;border-radius:999px;background:var(--coral);
font-family:var(--ff-m);font-size:10px;font-weight:700;line-height:1;color:#fff}
/* 접어 둔 칸 */
.pfold{margin-top:var(--v2);border:1px solid var(--line3);border-radius:var(--r1);background:var(--panel2)}
.pfold>summary{display:flex;align-items:center;gap:9px;padding:11px 15px;
font-size:13px;color:var(--ink5);cursor:pointer;list-style:none}
.pfold>summary::-webkit-details-marker{display:none}
.pfold>summary::before{content:'+';flex:0 0 auto;width:14px;text-align:center;
font-family:var(--ff-m);font-size:15px;line-height:1;color:var(--dim)}
.pfold[open]>summary::before{content:'\2212'}
.pfold>summary:hover{color:var(--teal)}
.pfs{flex:0 0 auto}
.pmk{flex:0 0 auto;padding:2px 8px;border:1px solid var(--line);border-radius:var(--r1);
background:var(--panel);font-family:var(--ff-s);font-size:10.5px;line-height:1.6;color:var(--dim)}
.pfoldbd{padding:0 15px 15px}
.pfoldbd>.pshelp{margin:0 0 10px}
.pbulk{margin-top:var(--v3)}
.pbulkgo{margin-top:10px}
.pfbd .seedft{margin-top:var(--v3);padding-top:var(--v3);border-top:1px solid var(--line2)}
/* 진단 대상 요약 */
.planbox{padding:15px 17px;border:1px solid var(--line2);border-radius:var(--r2);
background:var(--panel)}
.pfile{font-family:var(--ff-m);font-size:11px;color:var(--dim)}
.ptitle{margin-top:4px;font-family:var(--ff-s);font-size:15px;font-weight:700;line-height:1.5;
letter-spacing:-.018em;color:var(--ink)}
.pmeta{margin-top:5px;font-family:var(--ff-m);font-size:11px;color:var(--dim)}
.plnbtn{width:100%;margin-top:var(--v2)}
/* 파일 첨부 */
.drop{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:var(--v2);
padding:15px 17px;border:1.5px dashed var(--line);border-radius:var(--r2);background:var(--panel3);
transition:border-color .18s var(--e1),background .18s var(--e1)}
.drop.over{border-color:var(--teal);background:var(--teal-t)}
.dropL{display:flex;align-items:center;gap:12px;min-width:0}
.dropt{font-family:var(--ff-s);font-size:14px;font-weight:600;line-height:1.5;color:var(--ink)}
.drops{margin-top:2px;font-size:12px;line-height:1.65;color:var(--dim)}
.filechip{display:flex;align-items:center;gap:10px;margin-top:9px;padding:11px 14px;
border:1px solid var(--teal-b);border-radius:var(--r1);background:var(--teal-t)}
.filechip .fcn{flex:1 1 auto;min-width:0;font-size:13px;color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filechip .fcs{flex:0 0 auto;font-family:var(--ff-m);font-size:11px;color:var(--dim)}
.fstat{flex:0 0 auto;padding:3px 9px;border-radius:var(--r1);font-family:var(--ff-s);
font-size:10.5px;font-weight:700;line-height:1.5}
.fstat.ok{background:var(--teal);color:#F6F4EA}
.fstat.warn{background:var(--amber-t);border:1px solid var(--amber-b);color:var(--amber-d)}
.xbtn{flex:0 0 auto;width:24px;height:24px;border:none;border-radius:var(--r1);background:transparent;
font-size:17px;line-height:1;color:var(--dim)}
.xbtn:hover{background:var(--panel);color:var(--coral)}
.fchips{display:flex;flex-wrap:wrap;gap:6px}
.fchip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;
border:1px solid var(--line);border-radius:999px;background:var(--panel);
font-family:var(--ff-s);font-size:11.5px;line-height:1;color:var(--dim)}
.fchip.ok{border-color:var(--teal-b);background:var(--teal-t);color:var(--teal)}
.fchip b{font-size:11px;font-weight:700}
/* 코퍼스 고지 */
.corpwarn{display:flex;align-items:flex-start;gap:11px;margin:0 auto var(--v4);max-width:780px;
padding:13px 17px;border:1px solid var(--coral-b);border-left:3px solid var(--coral);
border-radius:var(--r1);background:var(--coral-t);text-align:left;
font-size:12.5px;line-height:1.8;color:var(--ink4)}
.corpwarn.inline{margin:0;max-width:none;border-radius:var(--r3) var(--r3) 0 0;border-bottom:none}
.corpwarn b{font-weight:700;color:var(--coral-d)}
.cwtag{flex:0 0 auto;padding:2px 8px;border-radius:var(--r1);background:var(--coral);
color:#fff;font-family:var(--ff-s);font-size:10px;font-weight:700;line-height:1.7}
/* ══════════════ 5. 리포트 ══════════════ */
/* 진단 설정 바 */
.ctlbar{position:sticky;top:62px;z-index:20;
border-bottom:1px solid var(--line2);background:rgba(255,254,250,.94);
-webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px)}
.ctlwrap{display:flex;align-items:center;gap:var(--v4);
max-width:var(--col);margin:0 auto;padding:var(--v2) 20px}
.cb-k{display:block;margin-bottom:5px;font-size:11px !important;color:var(--dim) !important}
.cb-target{flex:1 1 auto;min-width:0}
.cb-title{font-family:var(--ff-s);font-size:15.5px;font-weight:700;line-height:1.5;
letter-spacing:-.02em;color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-meta{margin-top:2px;font-family:var(--ff-m);font-size:11px;line-height:1.6;color:var(--dim)}
.cb-run{font-family:var(--ff-m);font-size:12px;color:var(--teal)}
.cb-mid{display:flex;align-items:flex-start;gap:var(--v3);flex:0 0 auto}
.cb-field{display:flex;flex-direction:column}
.cb-field input[type=range]{width:170px}
.cb-field .cb-k b{margin-left:6px;font-family:var(--ff-m);font-weight:700;color:var(--ink)}
.cb-scale{display:flex;justify-content:space-between;margin-top:4px;
font-family:var(--ff-s);font-size:10.5px;line-height:1.5;color:var(--dim)}
.cb-sel{height:32px;padding:0 28px 0 11px;border:1px solid var(--line);border-radius:var(--r1);
background-color:var(--panel);font-size:12.5px;color:var(--ink5)}
.cb-right{display:flex;align-items:center;gap:var(--v2);flex:0 0 auto;margin-left:auto}
.cb-hist{display:flex;align-items:center;gap:4px}
.cb-ver{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 8px;
border:1px solid transparent;border-radius:var(--r1);background:none;cursor:pointer;
font-family:var(--ff-m);font-size:12px;line-height:1.4}
.cb-ver.on{border-color:var(--line);background:var(--panel)}
.cb-vn{font-size:9.5px;color:var(--dim2)}
.cb-grade{display:flex;align-items:center;gap:10px;padding:6px 13px;
border:1px solid var(--line);border-radius:var(--r1);background:var(--panel)}
.cb-grade.g-A{border-color:var(--teal-b);background:var(--teal-t)}
.cb-grade.g-D{border-color:var(--coral-b);background:var(--coral-t)}
.cb-g{font-family:var(--ff-m);font-size:18px;font-weight:700;line-height:1;color:var(--ink)}
.cb-gs{font-family:var(--ff-s);font-size:11px;line-height:1.5;color:var(--ink4);white-space:nowrap}
.ctlbar .btn{height:33px;padding:0 13px;font-size:12.5px}
/* 본문 — 한 줄기, 같은 폭, 같은 리듬 */
.report{display:flex;gap:var(--v4);max-width:1380px;margin:0 auto;padding:var(--v3) 34px 120px}
/* .rep 가 flex 컨테이너라 내용이 적은 스캔 화면에서 폭이 수축했다.
결과 화면과 폭이 달라 보이던 원인 — flex 항목에 100% 를 못박는다. */
.report.vert{display:block;width:100%;max-width:none;padding:0}
.report.vert .repmain{max-width:var(--col);margin:0 auto;padding:var(--v4) 20px 110px}
.report.vert .herorow{display:block}
.report.vert .card,.report.vert .rblk,.report.vert .mast{padding:var(--pad)}
.report.vert .mastwrap,.report.vert .card,.report.vert .rblk,
.report.vert .mktzone,.report.vert .movezone{margin-bottom:var(--v3)}
.report.vert .rsechead{margin:var(--v5) 0 var(--v3)}
.report.vert .grid2,.report.vert .grid3{gap:var(--v3);margin-bottom:var(--v3)}
.repmain{flex:1 1 auto;min-width:0}
/* 좌측 레일 (구형 2단 배치) */
.side{width:294px;flex:0 0 auto;font-size:13px;padding-top:var(--v1)}
.side-in{position:sticky;top:86px;max-height:calc(100vh - 106px);overflow-y:auto;padding:0 10px 28px 0}
.sidehd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sidesec{margin-top:26px;padding-top:22px;border-top:1px solid var(--line2)}
.sidenote{margin-top:6px;font-size:12px;line-height:1.75;color:var(--dim)}
.side .hint,.side .sub{margin-top:6px;font-size:12px;line-height:1.75;color:var(--dim)}
.sidesel{width:100%}
.side-in .btn{width:100%}
.gradebox{display:flex;align-items:center;gap:10px;margin-top:var(--v3);padding:14px 16px;
border-radius:var(--r2)}
.gradebox.g-A{border:1px solid var(--teal-b);background:var(--teal-t)}
.gradebox.g-B{border:1px solid var(--amber-b);background:var(--amber-t)}
.gradebox.g-C{border:1px solid var(--coral-b);background:var(--coral-t)}
/* 5축 (구형) */
.axis{position:relative;padding:15px 12px 15px 0;border-bottom:1px solid var(--line3);cursor:pointer}
.axis::before{content:'';position:absolute;left:-14px;top:14px;bottom:14px;width:2px;
background:transparent;transition:background .18s var(--e1)}
.axis:hover::before{background:var(--dim3)}
.axis.chg::before{background:var(--teal)}
.axis .ax-h{display:flex;align-items:center;justify-content:space-between}
.axis .ax-v{margin-top:8px;font-size:15px;font-weight:600;line-height:1.55;
letter-spacing:-.014em;color:var(--ink)}
.axis .ax-o{margin-top:6px;font-size:12px;color:var(--dim2);text-decoration:line-through}
.axis select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
/* ── 표제부 — 서명(書名)의 카드 ──
흰 카드에 위 쌍괘선. 왼쪽에 서지사항, 오른쪽에 큰 수치. */
.mastwrap{display:flex;flex-direction:column}
.mast{
display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--v5);align-items:end;
margin:0 0 var(--v3);padding:var(--v4) var(--pad);
border:1px solid var(--line2);border-top:3px double var(--ink);
border-radius:0 0 var(--r3) var(--r3);
background:var(--panel);box-shadow:var(--sh1);
}
.mastwrap .scopewarn,.mastwrap .thinwarn,.mastwrap .corpwarn{
margin:0;border-radius:var(--r3) var(--r3) 0 0;border-bottom:none}
.mast.haswarn{border-top:1px solid var(--line2)}
.mastL{min-width:0}
.mastlbl{display:flex;align-items:center;flex-wrap:wrap;gap:3px 10px;
font-family:var(--ff-m) !important;font-size:11px;line-height:1.7;
letter-spacing:.04em !important;color:var(--dim) !important}
.mastlbl>*{flex:0 0 auto}
.mastlbl i{width:3px;height:3px;border-radius:999px;background:var(--dim3)}
.mastt{
margin:var(--v2) 0 0;max-width:18ch;
font-family:var(--ff-d);font-size:40px;line-height:1.42;
font-weight:700;letter-spacing:-.024em;color:var(--ink);
}
.mastsub{margin:var(--v2) 0 0;font-size:13.5px;line-height:1.8;color:var(--ink4)}
.mastsub b{font-weight:600;color:var(--ink6)}
.mastR{text-align:right;flex:0 0 auto}
.mastk{font-family:var(--ff-m) !important;letter-spacing:.04em !important;color:var(--dim) !important}
.mastnum{display:flex;align-items:baseline;justify-content:flex-end;gap:6px;margin-top:2px}
/* 큰 수치는 명조로 — 책의 글자가 잘하는 자리다 */
.mastnum .n{font-family:var(--ff-d);font-size:94px;line-height:.95;
font-weight:500;letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums}
.mastnum .d{font-family:var(--ff-m);font-size:15px;color:var(--dim2)}
.mastnum.teal .n{color:var(--teal)}
.mastnum.amber .n{color:var(--amber)}
.mastnum.coral .n{color:var(--coral)}
.mastmeta{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:var(--v2);
padding-top:var(--v2);border-top:1px solid var(--line3)}
.mastmeta .mo{font-size:11.5px;color:var(--ink4)}
/* 판정 구간 — 색이 있는 셋만 먹칠, 중립(미개척)은 테두리로 */
.mastq{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:var(--r1);
font-family:var(--ff-s);font-size:12.5px;font-weight:700;line-height:1;
color:var(--ink5);background:transparent;border:1px solid var(--dim2)}
.mastq.teal{background:var(--teal);border-color:var(--teal);color:#F6F4EA}
.mastq.amber{background:var(--amber);border-color:var(--amber);color:#F6F4EA}
.mastq.coral{background:var(--coral);border-color:var(--coral);color:#F6F4EA}
.mast.scanning .mastnum .n{color:var(--teal)}
.mast.scanning .mastq{background:var(--teal-t);border-color:var(--teal-b);color:var(--teal)}
/* ── 장 표제 — 주묵 번호 + 명조 제목 ── */
.rsechead{position:relative;display:flex;align-items:flex-end;justify-content:space-between;
gap:var(--v3);margin:var(--v5) 0 var(--v3);padding-bottom:12px;
border-bottom:1px solid var(--line)}
.rsechead::after{content:'';position:absolute;left:0;bottom:-1px;width:46px;height:2px;
background:var(--rubric)}
.rsechead:first-child{margin-top:0}
.rsechead>div:first-child{display:flex;align-items:baseline;gap:14px}
.rsechead h2{font-family:var(--ff-d);font-size:25px;line-height:1.4;
font-weight:700;letter-spacing:-.024em;color:var(--ink)}
/* 장 번호는 아라비아 숫자 — 자간을 벌려도 흩어지지 않는다 */
.secno{font-family:var(--ff-m) !important;font-size:14px !important;font-weight:700;
letter-spacing:.08em !important;color:var(--rubric) !important;background:none}
.secright{padding-bottom:2px;font-size:12.5px;color:var(--dim)}
.rsechead.skel h2{color:var(--dim2)}
.rsechead.skel .secno{color:var(--dim3) !important}
.skelbox{height:130px;border-radius:var(--r3);background:var(--panel2)}
/* 격자 — 같은 줄의 카드는 같은 높이로 끝난다 */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--v3);align-items:stretch}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--v3);align-items:stretch}
.grid2>*,.grid3>*{height:100%;min-width:0;display:flex;flex-direction:column}
/* min-width:0 이 없으면 flex 항목이 안쪽 표보다 좁아지지 못한다. 그러면
표가 칸을 밀고, 칸이 지면을 밀어 페이지 전체에 가로 스크롤이 생긴다
(모바일 390px 에서 실측 — 문서 폭이 421px 로 부풀었다). */
.grid2>.card,.grid3>.card,.grid2>.rblk,.grid3>.rblk{justify-content:flex-start}
.herorow{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(380px,1fr);gap:var(--v3);align-items:start}
.mapcard,.vcard{overflow:visible}
.vcard{display:flex;flex-direction:column}
/* ── 산출 블록 · 본문 ── */
.rblk{padding:var(--pad)}
.hero-card{padding:var(--pad)}
.rblk-h{display:flex;align-items:center;gap:10px;margin-bottom:var(--v2);padding-bottom:10px;
border-bottom:1px solid var(--line3);
font-family:var(--ff-s);font-size:15px;font-weight:700;line-height:1.5;
letter-spacing:-.016em;color:var(--ink)}
.rblk-h span{font-size:11px;letter-spacing:0}
.fnb{display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:21px;
border:1px solid var(--teal-b);border-radius:var(--r1);background:var(--teal-t);
font-family:var(--ff-m);font-size:11px;font-weight:700;line-height:1;color:var(--teal);
cursor:pointer;transition:background .12s,color .12s}
.fnb:hover{background:var(--teal);color:#fff}
/* 판정 리드 — 이 지면에서 가장 중요한 한 문장. 크기와 굵기로만 세운다.
두문자는 쓰지 않는다 — 한글에서 첫 글자를 떼면 단어가 쪼개진다. */
.vlead{margin:var(--v3) 0 0;max-width:34em;
font-family:var(--ff-d);font-size:20px;line-height:1.8;font-weight:600;
letter-spacing:-.018em;color:var(--ink)}
.vbody{margin:var(--v2) 0 0;font-size:14.5px;line-height:1.9;color:var(--ink5)}
.note{margin:var(--v2) 0 0;font-size:13px;line-height:1.85;color:var(--ink4)}
.note.box{padding:14px 17px;border:none;border-left:3px solid var(--line);
border-radius:0 var(--r1) var(--r1) 0;background:var(--panel3);color:var(--ink5)}
.note.err{color:var(--coral)} /* account.js 의 반복 오류 문구 — 인라인 style 승격 */
.hint{margin-top:10px;font-size:12.5px;line-height:1.75;color:var(--dim)}
.callout{margin:var(--v2) 0 0;padding:14px 17px;border-radius:0 var(--r1) var(--r1) 0;
font-size:13.5px;line-height:1.85;color:var(--ink5)}
.callout.amber{border-left:3px solid var(--amber);background:var(--amber-t)}
/* 산식 */
.fx{margin-top:var(--v2);padding:13px 17px;border:none;border-left:3px solid var(--line);
border-radius:0 var(--r1) var(--r1) 0;background:var(--panel3);
font-family:var(--ff-m);font-size:12.5px;line-height:2.05;color:var(--ink5)}
.fx b{color:var(--ink);font-weight:700}
.fx+.fx{margin-top:7px}
.zonelead{margin:0 0 var(--v3);font-size:15px;line-height:1.9;color:var(--ink5)}
.calcsec{padding:var(--v4) var(--pad)}
.calcsec+.calcsec{border-top:1px solid var(--line2)}
.lead{font-size:15px;line-height:1.9;color:var(--ink5)}
/* 각주 — 주묵 번호. 누르면 산출식으로 내려간다. */
.fn{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;
margin:0 1px 0 3px;padding:0 3px;border:none;border-radius:var(--r1);background:var(--teal-t);
font-family:var(--ff-m);font-size:10.5px;font-weight:700;color:var(--teal);
cursor:pointer;vertical-align:super;line-height:1;
transition:background .14s var(--e1),color .14s var(--e1)}
.fn:hover{background:var(--teal);color:#fff}
[data-calc],[data-jump],.clk-num,.mv-h{cursor:pointer}
.clk-num:hover{opacity:.82}
@keyframes flashmark{0%{background:var(--teal-t)}100%{background:transparent}}
.flash{animation:flashmark 1.1s ease-out}
/* ── 지표 카드 ── */
.icard{padding:22px 24px 20px;border-radius:var(--r3);cursor:pointer;
transition:border-color .18s var(--e1),box-shadow .18s var(--e1),transform .18s var(--e1)}
.icard:hover{border-color:var(--teal-b);box-shadow:var(--sh2);transform:translateY(-2px)}
.icard>div:first-child span:first-child{font-family:var(--ff-s) !important;
font-size:11px !important;font-weight:700;letter-spacing:0 !important;color:var(--label) !important}
.icard>div:first-child span:last-child{font-family:var(--ff-m) !important;
font-size:10.5px !important;letter-spacing:0 !important}
.icard>div:nth-child(2){margin-top:14px !important;font-family:var(--ff-d);
font-size:38px !important;font-weight:500 !important;
line-height:1.15 !important;letter-spacing:-.03em !important;font-variant-numeric:tabular-nums}
.icard>div:nth-child(3){margin-top:16px !important;height:3px !important;border-radius:3px;overflow:hidden}
.icard>div:nth-child(3)>i{height:3px !important;border-radius:3px}
.icard>p{margin-top:13px !important;font-size:12.5px !important;
line-height:1.8 !important;color:var(--ink4) !important}
/* 지표 스트립 (구형) */
.ind{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;margin-top:var(--v2)}
.ind .k{font-family:var(--ff-s);font-size:11px;font-weight:700;line-height:1.5;color:var(--label)}
.ind .v{margin-top:6px;font-family:var(--ff-d);font-size:23px;font-weight:500;line-height:1.2;
font-variant-numeric:tabular-nums}
.ind .bar{margin-top:9px;height:3px;border-radius:3px;background:var(--track);overflow:hidden}
.ind .bar i{display:block;height:3px;border-radius:3px}
.ind .clk{cursor:pointer;margin:-6px -9px;padding:6px 9px;border-radius:var(--r1)}
.ind .clk:hover{background:var(--panel2)}
.ind .clk:hover .k{color:var(--teal)}
/* ── 계보 바 ── */
.lineage{display:flex;align-items:center;gap:10px;height:38px;padding:0 var(--pad);
border-top:1px solid var(--line3);background:var(--panel2);
font-family:var(--ff-m);font-size:11px;color:var(--ink4);flex:0 0 auto}
.lineage b{color:var(--ink);font-weight:700}
.lineage i{font-style:normal;color:var(--dim2)}
.lin-btn{margin-left:auto;height:25px;padding:0 11px;border:1px solid var(--line);
border-radius:var(--r1);background:var(--panel);
font-family:var(--ff-m);font-size:10.5px;color:var(--ink5)}
.lin-btn:hover{border-color:var(--teal);color:var(--teal)}
.vcard .lineage{margin-top:var(--v3);border-radius:0}
.lineagebar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:var(--v3);
padding:14px 22px;border:1px solid var(--line3);border-radius:var(--r2);
background:var(--cream);font-family:var(--ff-m);font-size:11.5px;line-height:1.7;color:var(--ink4)}
.lineagebar b{color:var(--ink);font-weight:700}
.lineagebar i{font-style:normal;color:var(--dim2)}
.lineagebar .lbl2{padding-right:12px;margin-right:2px;border-right:1px solid var(--line)}
/* ── 조정 방안 — 쌍괘선으로 여는 마지막 장 ── */
.movezone{margin-top:var(--v5);padding-top:0}
.movezone::before{content:'';display:block;width:100%;height:4px;margin-bottom:var(--v3);
border-top:2px solid var(--ink);border-bottom:1px solid var(--ink)}
.mvitem{padding:19px 21px;border:1px solid var(--line2);border-radius:var(--r3);
background:var(--panel);cursor:pointer;
transition:border-color .16s var(--e1),background .16s var(--e1),box-shadow .16s var(--e1),
transform .18s var(--e1)}
.mvitem:hover{border-color:var(--dim2);box-shadow:var(--sh1)}
.mvitem.on{border-color:var(--teal);background:var(--teal-t);box-shadow:inset 3px 0 0 var(--teal)}
.move{padding:15px 17px;border:1px solid var(--line2);border-radius:var(--r2);
background:var(--panel2);cursor:pointer}
.move+.move{margin-top:9px}
.move:hover{border-color:var(--dim2)}
.move.best{border-color:var(--teal);background:var(--teal-t)}
.move .mv-d{display:flex;gap:16px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line3);
font-family:var(--ff-m);font-size:11px;line-height:1.6;color:var(--label)}
.move.best .mv-d,.move.best .mv-x{border-top-color:var(--teal-w)}
.move .chev{transition:transform .15s}
.move.open .chev{transform:rotate(90deg)}
.mv-x{margin-top:12px;padding-top:12px;border-top:1px solid var(--line3)}
.vgo{margin-top:var(--v3);width:100%;height:40px;font-size:13.5px}
/* ── 진단 이력 ── */
.trail{display:flex;align-items:center;margin-top:var(--v3)}
.tnode{display:flex;flex-direction:column;align-items:center;gap:7px;flex:0 0 auto;cursor:pointer}
.tdot{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;
border:1.5px solid var(--dim3);border-radius:999px;background:var(--panel);
font-family:var(--ff-m);font-size:11px;font-weight:700;line-height:1}
.tnode.cur .tdot{width:31px;height:31px;border-width:2px;border-color:var(--ink);font-size:12px}
.tnode:hover .tdot{border-color:var(--ink)}
.tline{flex:1 1 auto;height:1px;margin:0 5px 20px;border-top:1px solid var(--line)}
/* ── 주제 지형도 ──
SVG 안 text 에는 서체를 따로 지정한다. 지정이 없으면 브라우저 기본
산세리프로 떨어져 지도만 다른 글씨로 따로 논다. */
.mapbody{position:relative;padding:var(--v3) var(--v2) var(--v1)}
.mapbody.scanning .sweep{position:absolute;top:26px;width:1px;height:76%;
background:linear-gradient(180deg,rgba(28,90,65,0),rgba(28,90,65,.7),rgba(28,90,65,0))}
#plot{max-width:780px !important;width:100%}
#plot text{font-family:var(--ff);letter-spacing:-.008em}
#plot .mo,#plot text.mo{font-family:var(--ff-m);letter-spacing:0}
#plot text[letter-spacing]{letter-spacing:0 !important}
#plot .pt{transition:cx .55s cubic-bezier(.3,.8,.3,1),cy .55s cubic-bezier(.3,.8,.3,1)}
#plot .cl{cursor:pointer;transition:opacity .12s}
#plot .cl:hover{opacity:.82}
#plot .cl:hover circle{stroke-width:2.4}
#plot .cl:hover text{font-weight:700;fill:var(--teal-d)}
/* 사분면 이름은 배경에 가깝게 — 데이터가 주인공이다 */
#plot text[fill="#337057"],#plot text[fill="#8C6414"],
#plot text[fill="#756D5A"],#plot text[fill="#832A19"]{font-size:11.5px !important;opacity:.76}
.hb{animation:pop .5s var(--e2) both}
@keyframes pop{from{opacity:0;transform:scale(.4);transform-origin:center;transform-box:fill-box}
to{opacity:1;transform:none}}
/* ── 경고 띠 ── */
.scopewarn{margin:0 0 var(--v2);padding:14px 18px;border:1px solid var(--coral-b);
border-left:3px solid var(--coral);border-radius:0 var(--r2) var(--r2) 0;background:var(--coral-t);
font-size:13.5px;line-height:1.85;color:var(--ink5)}
.thinwarn{margin:0 0 var(--v2);padding:14px 18px;border:1px solid var(--amber-b);
border-left:3px solid var(--amber);border-radius:0 var(--r2) var(--r2) 0;background:var(--amber-t);
font-size:13.5px;line-height:1.85;color:var(--ink5)}
.thinwarn b{color:var(--amber-d);font-weight:700}
.restale{display:flex;align-items:center;justify-content:space-between;gap:20px;
padding:14px 34px;border-bottom:1px solid var(--amber-b);background:var(--amber-t);
font-size:13.5px;line-height:1.75;color:var(--ink5)}
.restale b{color:var(--amber-d);font-weight:700}
.restale .btn{flex:0 0 auto;border-color:var(--amber-d);background:transparent;color:var(--amber-d)}
.restale .btn:hover{background:var(--amber-d);color:#fff}
/* ── 민간 보조 신호 — 부록 ── */
.mktzone{margin-top:var(--v5);padding-top:0}
.mktzone::before{content:'';display:block;height:4px;
border-top:1px solid var(--amber-b);border-bottom:1px solid var(--amber-b)}
.mkthd{display:flex;align-items:baseline;gap:13px;margin:var(--v3) 0 var(--v2)}
.mkttag{display:inline-flex;align-items:center;height:21px;padding:0 10px;
border:1px solid var(--amber-b);border-radius:var(--r1);background:var(--amber-t);
font-family:var(--ff-s);font-size:10.5px;font-weight:700;line-height:1;color:var(--amber-d)}
.mktt{font-family:var(--ff-d);font-size:19px;font-weight:700;line-height:1.5;
letter-spacing:-.02em;color:var(--ink)}
.mktsrc{margin-left:auto;font-family:var(--ff-m);font-size:11px;color:var(--dim)}
.mktft{margin:10px 0 0;font-size:12px;line-height:1.8;color:var(--dim)}
.aitag{display:inline-flex;align-items:center;height:20px;padding:0 9px;border:1px solid var(--teal-b);
border-radius:var(--r1);background:var(--teal-t);font-family:var(--ff-s);
font-size:10.5px;font-weight:700;line-height:1;color:var(--teal)}
/* ── AI 해석 ── */
.mdh{margin:var(--v3) 0 9px;padding-left:12px;border-left:3px solid var(--amber);
font-family:var(--ff-s);font-size:14.5px;font-weight:700;line-height:1.55;
letter-spacing:-.016em;color:var(--ink)}
.mdh:first-child{margin-top:0}
.mdp{margin:0 0 11px;font-size:14px;line-height:1.9;color:var(--ink5)}
.mdp:last-child{margin-bottom:0}
.mdul{margin:0 0 11px;padding-left:18px;list-style:none}
.mdul li{position:relative;margin-bottom:7px;font-size:13.5px;line-height:1.85;color:var(--ink5)}
.mdul li::before{content:'';position:absolute;left:-14px;top:.8em;width:5px;height:2px;
background:var(--amber)}
.mdul li:last-child{margin-bottom:0}
/* ── 분석 대기 ── */
.aiwait{display:flex;flex-direction:column;align-items:center;justify-content:center;
min-height:340px;padding:60px 40px;text-align:center}
.aispin{width:40px;height:40px;margin-bottom:26px;border-radius:999px;
border:2px solid var(--teal-t);border-top-color:var(--teal);animation:aispin 1s linear infinite}
@keyframes aispin{to{transform:rotate(360deg)}}
.aiwt{font-family:var(--ff-d);font-size:19px;font-weight:700;line-height:1.5;
letter-spacing:-.018em;color:var(--ink)}
.aiws{margin-top:12px;font-size:13px;line-height:1.8;color:var(--ink5)}
.aiwn{margin-top:26px;font-size:12px;line-height:1.8;color:var(--dim)}
/* 대기 화면의 통찰 카드 — 진행률 연출 대신, 이 진단이 실제로 무엇을
하는지 한 장씩. 8초마다 다음 장으로 넘어간다(재렌더가 넘긴다). */
/* 주의 — 이 화면은 1초마다 통째로 다시 그려진다. 카드에 진입 애니메이션을
걸면 매초 다시 재생되어 깜빡인다(실측). 장 넘김은 내용 교체로만 보인다. */
/* 09-15 — 고정 크기. 카드 길이가 카드마다 다르면 패널 높이가 흔들려
지형도·판정 영역까지 밀려 움직인다(레이아웃 시프트 — "히어로는 분석
중과 결과에서 같은 자리를 지킨다" 원칙 위반, app.js 상단 주석). 그래서
height 를 고정한다. overflow:hidden·line-clamp 는 안전망일 뿐이다 —
평소엔 걸리지 않는다. app.js 의 WAIT_TITLE_MAX(28자)·WAIT_BODY_MAX(110자)
와 빌드 시 검증 함수(validateWaitPool)가 상한을 넘는 문장을 애초에
풀에 넣지 못하게 막기 때문이다.
186px 산정 근거 — 제목 1줄 + 본문 4줄, 카드 안쪽 폭 약 476px(520-패딩44):
패딩 18(위)+17(아래) + 머리글 한 줄 18.4(10.5px·줄간격 1.75) +
제목 위 여백 9 + 제목 한 줄 23.25(15.5px·줄간격 1.5) +
본문 위 여백 6 + 본문 네 줄 92.5(12.5px·줄간격 1.85×4)
= 184.15 → 186px(반올림 여유 2px). */
.aicard{width:min(520px,100%);height:186px;margin:28px auto 0;padding:18px 22px 17px;
border:1px solid var(--line2);border-radius:var(--r2);background:var(--panel2);
text-align:left;overflow:hidden}
.aick{display:flex;align-items:center;gap:11px;
font-family:var(--ff-s);font-size:10.5px;font-weight:700;color:var(--rubric)}
.aick i{flex:1 1 auto;height:1px;background:var(--line2)}
.aick .mo{font-size:10px;color:var(--dim2)}
.aict{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;
overflow:hidden;margin-top:9px;font-family:var(--ff-d);font-size:15.5px;font-weight:700;
line-height:1.5;letter-spacing:-.016em;color:var(--ink)}
.aicb{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;
overflow:hidden;margin:6px 0 0;font-size:12.5px;line-height:1.85;color:var(--ink4)}
/* 스크롤 앵커 */
.rsechead,[id^=rep-],#sec-verdict,#sec-map,#sec-moves,#sec-ind,#sec-calc,#sec-cr,
#sec-books,#sec-readers,#sec-trust,#sec-market,#sec-interpret,.movezone{scroll-margin-top:118px}
#sec-about,#sec-method,#sec-metric{scroll-margin-top:82px}
/* ══════════════ 6. 시트 · 드로어 ══════════════ */
/* 오버레이는 화면 폭(100vw)을 따른다. width:100% 로 두면 본문 어딘가의
넓은 표 때문에 부푼 '문서 폭'을 따라가, 시트가 화면보다 넓어지고 그 안의
발급 카드가 오른쪽으로 삐져나간다(모바일 390px 에서 421px 로 실측). */
.ovl{position:fixed;inset:0;z-index:40;width:100vw;display:flex;align-items:flex-end;
justify-content:center;background:rgba(32,29,21,.4);animation:fade .18s ease}
.sheet{width:100%;max-width:100vw;max-height:calc(100vh - 78px);overflow-y:auto;
border-radius:var(--r3) var(--r3) 0 0;background:var(--paper);
box-shadow:0 -1px 0 var(--line),0 -18px 40px -22px rgba(32,29,21,.3);
animation:up .24s cubic-bezier(.2,.7,.3,1)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes up{from{transform:translateY(28px);opacity:.6}to{transform:none;opacity:1}}
.drw{position:fixed;inset:0;z-index:60;width:100vw;display:flex;justify-content:flex-end;
background:rgba(32,29,21,.32);animation:fade .15s ease}
.dpanel{width:644px;max-width:92vw;height:100%;overflow-y:auto;background:var(--panel);
border-radius:var(--r3) 0 0 var(--r3);
box-shadow:-18px 0 44px -22px rgba(32,29,21,.4);animation:slidein .2s cubic-bezier(.2,.7,.3,1)}
@keyframes slidein{from{transform:translateX(40px);opacity:.6}to{transform:none;opacity:1}}
/* ── 계정 패널 — 내 진단 · 계정 삭제(카드 D6) ──────────────── */
.runrow{padding:11px 0;border-top:1px solid var(--line3)}
.runrow .runt{font-size:13px;color:var(--ink6);overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;max-width:calc(100% - 90px)}
.runrow .runmeta{margin-top:3px;font-size:11.5px;color:var(--ink5)}
.runact{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.runact .btn{height:30px;padding:0 12px;font-size:12px}
.dangerzone{padding:16px 18px;border:1px solid var(--coral-b);border-left:3px solid var(--coral);
border-radius:0 var(--r2) var(--r2) 0;background:var(--coral-p)}
.dangerzone .btn{border-color:var(--coral-b);color:var(--coral-d)}
.dangerzone .btn:hover{background:var(--coral-t)}
.dangerzone .btn.pri{background:var(--coral);color:#fff;border-color:transparent}
.dangerzone .btn.pri:hover{background:var(--coral-d)}
.dangerzone .btn[disabled]{opacity:.45}
.delinput{width:100%;height:38px;margin-top:8px;padding:0 12px;border:1px solid var(--line);
border-radius:0;background:var(--panel2);font:inherit;font-size:13px;color:var(--ink)}
.delinput:focus{border-color:var(--coral);box-shadow:0 0 0 3px var(--coral-t)}
/* 계정 패널 절 구조 — account.js 가 매번 같은 값을 인라인으로 반복하던
것을 승격(09-15). 카드·표·위험구역·상품 카드의 시각을 한 어휘로 묶는다. */
.accthd{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
padding:24px 28px 0}
.acctkicker{font-size:11px;letter-spacing:.16em;color:var(--dim)}
.accttitle{margin:10px 0 0;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.acctclose{width:42px;padding:0;flex:0 0 auto}
.acctlimlbl{margin:20px 28px 0;font-size:11px;letter-spacing:.14em;color:var(--dim)}
.acctlimgrid{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:6px 28px 0}
.acctlimnote{margin:8px 28px 0}
.acctsec{padding:22px 28px 0}
.acctsech{font-size:14px;font-weight:600;color:var(--ink)}
.acctsubh{font-size:12.5px;font-weight:600;color:var(--ink5)}
.acctbal{font-size:20px;font-weight:500;color:var(--teal)}
.acctbody{margin-top:10px}
.acctdanger{padding:26px 28px 30px}
.acctts{flex:0 0 auto;font-size:11px;color:var(--dim)} /* 진단·확인서 행의 시각 */
/* 사용량 카드 — 이용 상한 2종 */
.usagebox{padding:12px 14px;background:var(--panel2);border:1px solid var(--line3)}
.usagebox .k{font-size:11px;color:var(--label)}
.usagebox .v{margin-top:4px;font-size:18px;font-weight:500;color:var(--ink)}
.usagebox .v small{font-size:12px;font-weight:400;color:var(--dim)}
/* 발급·진단 행 — 목록 한 줄 */
.acctrow{display:flex;justify-content:space-between;gap:12px;padding:10px 0;
border-top:1px solid var(--line3);text-decoration:none;color:inherit}
.acctrow .rt{font-size:13px;color:var(--ink6);overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
/* 결제 상품 카드 — pricing.html 의 .pack 과 같은 어휘, 패널 안이라 더 작다 */
.acctpack{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:14px 16px;margin-top:8px;border:1px solid var(--line3);background:var(--panel2)}
.acctpack .k{font-size:11px;letter-spacing:.08em;color:var(--label)}
.acctpack .v{margin-top:4px;font-size:14px;color:var(--ink)}
.acctpack .v .unit{margin-left:6px;font-size:11px;color:var(--dim)}
/* 크레딧 원장 행 */
.ledgerrow{display:flex;justify-content:space-between;padding:7px 0;border-top:1px solid var(--line3)}
/* 토스트 — 지면에 남길 것이 아닌 알림만 여기로. 성공·실패 두 톤뿐이고
동시에 한 장만 뜬다. 정보성 토스트는 만들지 않는다 — 알릴 것이 있으면
지면에 쓴다. 상단 바와 같은 장정색이라 화면의 두 끝이 한 재료가 된다. */
#toast{
position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));z-index:80;
display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);
padding:12px 18px;border-radius:var(--r2);background:var(--bar);
box-shadow:0 10px 30px -12px rgba(32,29,21,.55);
font-family:var(--ff-s);font-size:13.5px;line-height:1.5;color:var(--bar-ink);
transform:translateX(-50%);animation:tin .2s var(--e1)}
#toast::before{content:'';flex:0 0 auto;width:6px;height:6px;border-radius:999px;
background:var(--teal-l)}
#toast.bad::before{background:#E0967C}
#toast.out{animation:tout .22s var(--e1) forwards}
/* id 선택자가 UA 의 [hidden]{display:none} 을 이기므로 숨김을 직접 못박는다 —
이것이 없으면 지속 요소로 바뀐 토스트가 영영 안 사라진다. */
#toast[hidden]{display:none}
@keyframes tin{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes tout{to{opacity:0;transform:translate(-50%,8px)}}
/* ══════════════ 7. 발급 게이트 ══════════════ */
.gsheet{background:var(--paper)}
.gate{display:flex;justify-content:center;padding:var(--v6) 24px 80px}
.gatecard{
position:relative;width:700px;padding:50px 56px 44px;overflow:hidden;
border:1px solid var(--line2);border-top:3px double var(--ink);
border-radius:0 0 var(--r3) var(--r3);
background:var(--panel);box-shadow:var(--sh1);animation:gin .34s var(--e1) both;
}
@keyframes gin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.gsealbg{position:absolute;top:-16px;right:-18px;color:var(--line2);opacity:.55;pointer-events:none}
.gsealbg svg{width:172px;height:172px}
/* 로마자 표기라 넓은 자간을 허용한다 */
.glbl{display:block;font-family:var(--ff-m) !important;letter-spacing:.18em !important;
color:var(--rubric) !important}
.gtitle{margin:var(--v2) 0 0;font-family:var(--ff-d);font-size:35px;
line-height:1.42;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.gp{margin:var(--v2) 0 0;max-width:40em;font-size:15px;line-height:1.9;color:var(--ink5)}
.gtab{margin-top:var(--v4);border-top:1.5px solid var(--ink)}
.gtr{display:grid;grid-template-columns:104px minmax(0,1fr);gap:20px;align-items:baseline;
padding:15px 0;border-bottom:1px solid var(--line3)}
.gv{font-size:15px;line-height:1.75;color:var(--ink)}
.gvs{display:block;margin-top:4px;font-family:var(--ff-m);font-size:11.5px;
line-height:1.7;color:var(--dim)}
.gpl{width:100%;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r1);
background:var(--panel);font-family:inherit;font-size:14px;color:var(--ink);outline:none;
transition:border-color .14s var(--e1),box-shadow .14s var(--e1)}
.gpl::placeholder{color:var(--dim3)}
.gpl:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-t)}
.gbtn{width:100%;height:54px;margin-top:var(--v4);font-size:15.5px;font-weight:700;letter-spacing:0}
.gspin{width:13px;height:13px;border:2px solid rgba(246,244,234,.4);border-top-color:#F6F4EA;
border-radius:999px;animation:spin .62s linear infinite}
.spin{animation:spin .62s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.gnote{margin:var(--v2) 0 0;font-size:12.5px;line-height:1.85;text-align:center;color:var(--dim)}
.gatecard.busy .gnote{color:var(--teal)}
.bbt{font-family:var(--ff-s);font-size:16px;font-weight:700;line-height:1.5;
letter-spacing:-.018em;color:var(--ink)}
.bbs{margin-top:2px;font-family:var(--ff-m);font-size:12px;line-height:1.6;color:var(--ink4)}
.bbs b{color:var(--ink);font-weight:700}
/* ══════════════ 8. 확인서 ══════════════
확인서만은 전면 명조다 — 이것은 화면이 아니라 문서이고, 문서의 활자는
명조가 맞다. 반드시 A4 1면(794×1123)에 앉아야 한다. 아래 치수는 그
제약에서 역산한 값이다 — 하나를 키우면 다른 하나를 줄여야 한다.
9~11px 기재사항만 명조가 뭉개지므로 고딕으로 돌린다. */
.docwrap{display:flex;justify-content:center;padding:var(--v4) 0 70px}
/* 출력을 전제로 한다. 바탕은 순백 — 상아빛은 화면 지면의 색이지
종이의 색이 아니다(프린터가 옅은 회색으로 깔아 버린다).
여백은 A4 기준 상하 약 12mm · 좌우 15mm(46px · 57px @96dpi). */
.cert{position:relative;flex:0 0 auto;background:#FFFFFF;color:var(--ink);
font-family:var(--ff-d);
box-shadow:0 1px 0 rgba(32,29,21,.09),0 22px 52px -26px rgba(32,29,21,.42)}
.cert.fresh{animation:cin .5s var(--e1) both}
@keyframes cin{from{opacity:0;transform:translateY(20px) scale(.985)}to{opacity:1;transform:none}}
.gui{position:absolute;inset:0;color:var(--teal);pointer-events:none}
.cwm{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-19deg);
font-family:var(--ff-d);font-size:132px;font-weight:700;letter-spacing:.1em;color:var(--teal);
opacity:.05;white-space:nowrap;pointer-events:none;user-select:none}
.cbody{position:relative;padding:46px 57px 0}
.chead{display:flex;align-items:center;justify-content:space-between;gap:20px}
.corg{display:flex;align-items:center;gap:12px}
.corgn{font-family:var(--ff-d);font-size:14px;font-weight:700;line-height:1.4;
letter-spacing:0;color:var(--ink)}
.corge{margin-top:1px;font-family:var(--ff-m) !important;font-size:9.5px;
letter-spacing:.12em !important;color:var(--dim2) !important}
.cno{padding:3px 10px;border:1px solid var(--line);border-radius:0;background:transparent;
font-family:var(--ff-m);font-size:11px;line-height:1.4;color:var(--ink5)}
.cno b{font-weight:700;color:var(--ink)}
.ctitlewrap{margin-top:9px;text-align:center}
/* 증서 제자(題字) — 관례대로 자간을 벌린다. 이 판에서 한글에 넓은 자간을
주는 유일한 자리이고, 여섯 글자짜리 표제라 흩어져 보이지 않는다. */
.ctitle{margin:0;font-family:var(--ff-d);font-size:28px;line-height:1.32;
font-weight:700;letter-spacing:.16em;text-indent:.16em;color:var(--ink)}
.csub{margin-top:6px;font-family:var(--ff-m);font-size:9.5px;letter-spacing:.26em;
text-indent:.26em;color:var(--dim)}
.crule{display:flex;flex-direction:column;gap:2.5px;align-items:center;margin-top:6px}
.crule i{display:block;width:126px;height:1px;background:var(--ink)}
.crule i:last-child{height:2.4px;background:var(--rubric)}
.ctab{width:100%;margin-top:10px;table-layout:fixed;border-top:1.6px solid var(--ink);border-collapse:collapse}
.ctab th.ck{width:84px;padding:4.5px 11px;border-top:none;border-bottom:1px solid var(--line2);
background:#F6F4EE;text-align:left;font-family:var(--ff-s);font-size:10.5px;font-weight:700;
line-height:1.5;letter-spacing:0;color:var(--ink5)}
.ctab td.cv{padding:5px 13px;border-bottom:1px solid var(--line2);font-size:12.5px;
line-height:1.62;color:var(--ink)}
/* 기획명이 길면 A4 를 넘긴다. 두 줄로 제한하고 넘치면 말줄임한다. */
.ctab td.cv b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;font-weight:700;line-height:1.5}
.cvs{float:right;font-family:var(--ff-m);font-size:10.5px;color:var(--dim)}
.cvs2{margin-left:6px;font-family:var(--ff-m);font-size:10.5px;color:var(--dim)}
.clead{margin:9px 0 0;font-size:12.5px;line-height:1.7;color:var(--ink6);text-align:justify}
.clead b{font-weight:700;color:var(--ink)}
.cverd{display:grid;grid-template-columns:minmax(0,1.6fr) 138px 108px;margin-top:9px;
border:1.2px solid var(--teal);background:transparent}
.cverd.y{border-color:var(--amber)}
.cverd.r{border-color:var(--coral)}
.cvcell{padding:6px 15px 7px;border-right:1px solid var(--line2)}
.cvcell:last-child{border-right:none}
.cvcell.num{display:flex;flex-direction:column;justify-content:center;background:#F8F6F0}
.cvk{font-family:var(--ff-s) !important;font-size:10px !important;letter-spacing:0 !important}
.cvv{margin-top:2px;font-family:var(--ff-d);font-size:22px;line-height:1.35;
font-weight:700;letter-spacing:0;color:var(--teal)}
.cverd.y .cvv{color:var(--amber-d)}
.cverd.r .cvv{color:var(--coral-d)}
.cvd{margin-top:4px;font-family:var(--ff-s);font-size:11px;line-height:1.58;color:var(--ink5)}
.cvnum{margin-top:2px;font-family:var(--ff-d);font-size:28px;line-height:1.2;
font-weight:500;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.cvnum span{margin-left:3px;font-family:var(--ff-m);font-size:11px;color:var(--dim)}
.csech{display:flex;align-items:center;gap:12px;margin-top:8px}
.csech span:first-child{font-family:var(--ff-s);font-size:11.5px;font-weight:700;
line-height:1.4;letter-spacing:0;color:var(--ink)}
.csech i{flex:1 1 auto;height:1px;background:var(--line)}
.csech span:last-child{font-family:var(--ff-m);font-size:10px;letter-spacing:.04em;color:var(--dim2)}
.citab{width:100%;margin-top:6px;border-collapse:collapse}
.citab td{padding:2px 0;border-bottom:1px solid var(--line3);vertical-align:baseline}
.citab .cin{width:130px;font-family:var(--ff-s);font-size:11px;line-height:1.6;color:var(--ink5)}
.citab .civ{width:132px;font-family:var(--ff-m);font-size:12.5px;font-weight:700;color:var(--ink)}
.citab .cis{font-family:var(--ff-s);font-size:10px;line-height:1.6;color:var(--dim);text-align:right}
/* 산출 근거 · 유의사항은 2단으로 접어 한 면에 넣는다.
9~11px 구간이라 전부 고딕으로 돌린다 — 명조는 이 크기에서 뭉개진다. */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;margin-top:6px}
.cgi{display:grid;grid-template-columns:74px minmax(0,1fr);gap:11px;align-items:baseline;
padding:2.5px 0;border-bottom:1px solid var(--line3)}
.cgk{font-family:var(--ff-s) !important;font-size:10px !important}
.cgv{font-family:var(--ff-s);font-size:11px;line-height:1.6;color:var(--ink6)}
.cwarn{margin-top:8px;padding:7px 13px 8px;border:1px solid var(--line2);background:#F6F4EE}
.cwk{font-family:var(--ff-s) !important;font-size:10px !important;color:var(--ink5) !important}
.cwl{columns:2;column-gap:24px;margin:6px 0 0;padding-left:15px}
.cwl li{margin-top:0;padding-bottom:2px;font-family:var(--ff-s);font-size:10.5px;
line-height:1.6;color:var(--ink5);break-inside:avoid}
.cwl li b{font-weight:700;color:var(--ink)}
.cissue{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;
gap:18px;margin-top:8px}
.cqr{text-align:center}
.cqr svg{display:block;padding:4px;border:1px solid var(--line2);background:#fff}
.cqrk{margin-top:5px;font-family:var(--ff-m);font-size:10px;font-weight:700;
letter-spacing:.08em;color:var(--ink)}
.cqru{margin-top:2px;font-family:var(--ff-m);font-size:9px;color:var(--dim2)}
.csign{position:static;flex:1 1 auto;min-width:0;padding-right:34px;text-align:center}
.csigd{font-family:var(--ff-s);font-size:11px;line-height:1.5;color:var(--ink5)}
/* 발급기관명 — 원문에 이미 낱자 사이 공백이 들어 있으므로 자간은 0 */
.csigo{margin-top:7px;font-family:var(--ff-d);font-size:16px;line-height:1.4;
font-weight:700;letter-spacing:0;color:var(--ink);white-space:nowrap}
/* 직인은 서명부의 형제 칸으로 뺀다 (자식으로 두면 가로 넘침이 생긴다) */
.csealwrap{position:relative;right:auto;bottom:auto;margin:0 0 -6px -34px;color:var(--seal);
mix-blend-mode:multiply;opacity:.9;transform:rotate(-7deg)}
.cert.fresh .csealwrap{animation:stamp .52s cubic-bezier(.3,1.5,.5,1) .34s both}
@keyframes stamp{
0%{opacity:0;transform:rotate(-24deg) scale(2.1)}
62%{opacity:.96;transform:rotate(-5deg) scale(.93)}
100%{opacity:.9;transform:rotate(-7deg) scale(1)}
}
.sealsvg{display:block;width:88px;height:88px}
.micro{margin-top:5px;font-family:var(--ff-m);font-size:3.4px;letter-spacing:.04em;
line-height:1.2;color:var(--dim3);overflow:hidden;white-space:nowrap;user-select:none}
.cfoot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:6px;
padding-top:6px;border-top:1px solid var(--line2);font-family:var(--ff-m);
font-size:9.5px;line-height:1.5;color:var(--dim2)}
/* ══════════════ 9. 제출용 기획서 ══════════════ */
.briefbar{display:flex;align-items:center;justify-content:space-between;gap:20px;
padding:16px 34px;border-bottom:1px solid var(--line2);background:var(--panel)}
.usepick{display:flex;gap:3px;padding:3px;border:1px solid var(--line2);border-radius:var(--r2);
background:var(--panel2)}
.usebtn{height:32px;padding:0 14px;border:none;border-radius:var(--r1);background:transparent;
font-family:var(--ff-s);font-size:12.5px;font-weight:600;line-height:1;color:var(--ink4);
transition:color .15s var(--e1),background .18s var(--e1)}
.usebtn:hover{color:var(--teal)}
.usebtn.on{background:var(--ink);color:var(--panel)}
.usenote{padding:14px 34px;border-bottom:1px solid var(--line2);background:var(--teal-t);
font-size:13.5px;line-height:1.8;color:var(--ink5)}
.usenote b{color:var(--teal)}
.page{width:794px;margin:0 auto;padding:56px 64px 50px;background:var(--panel);
font-family:var(--ff-d);
box-shadow:0 1px 0 rgba(32,29,21,.08),0 18px 44px -22px rgba(32,29,21,.3)}
.bhead{display:flex;align-items:flex-start;justify-content:space-between;
padding-bottom:16px;border-bottom:1.5px solid var(--ink)}
.btitle-main{margin:28px 0 0;font-family:var(--ff-d);font-size:28px;line-height:1.48;
font-weight:700;letter-spacing:-.022em;color:var(--ink)}
.blead{margin:var(--v2) 0 0;max-width:44em;font-size:14px;line-height:1.95;color:var(--ink6)}
.bsec{display:flex;align-items:baseline;justify-content:space-between;margin-top:32px;
padding-bottom:8px;border-bottom:1px solid var(--ink)}
.bno{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:18px;
border-radius:0;background:transparent;font-family:var(--ff-m);font-size:11px;
font-weight:700;line-height:1;letter-spacing:.06em;color:var(--rubric)}
.btitle{font-family:var(--ff-s);font-size:15px;font-weight:700;line-height:1.5;
letter-spacing:-.016em;color:var(--ink)}
.bright{font-family:var(--ff-m);font-size:10.5px;color:var(--dim)}
.kvtable{margin-top:2px}
.kvr{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:16px;align-items:baseline;
padding:11px 0;border-bottom:1px solid var(--line3)}
.kvv{font-size:13.5px;line-height:1.8;color:var(--ink)}
.kvs{font-family:var(--ff-m);font-size:11px;color:var(--dim);white-space:nowrap}
.brow{display:flex;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--line3)}
.brow .bt{flex:1 1 auto;min-width:0;font-size:13.5px;line-height:1.7;color:var(--ink)}
.brow .bmeta{flex:0 0 auto;font-size:12px;color:var(--ink5)}
.brow .bnum{flex:0 0 auto;font-family:var(--ff-m);font-size:12px;color:var(--ink4)}
.bp{margin:0;font-size:13.5px;line-height:1.95;color:var(--ink6)}
.bp.small{margin-top:11px;font-size:12px;line-height:1.85;color:var(--ink4)}
.bcall{margin-top:15px;padding:13px 16px;border-left:3px solid var(--line);background:var(--panel2)}
.bcall.g{border-left-color:var(--teal);background:var(--teal-t)}
.bcall.r{border-left-color:var(--coral);background:var(--coral-t)}
.bcall.y{border-left-color:var(--amber);background:var(--amber-t)}
.bind{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.bindc{padding:13px 0;border-bottom:1px solid var(--line3)}
.bindv{margin-top:4px;font-family:var(--ff-d);font-size:18px;line-height:1.3;color:var(--ink);
font-variant-numeric:tabular-nums}
.binds{margin-top:3px;font-family:var(--ff-s);font-size:10.5px;line-height:1.5;color:var(--dim2)}
.bfoot{margin-top:34px;padding-top:15px;border-top:1px solid var(--line2)}
/* ══════════════ 10. 데이터 명세 ══════════════ */
.dspec{padding:var(--v5) 0 92px}
.dstop{max-width:860px}
.dstop h1{margin:12px 0 0;font-family:var(--ff-d);font-size:38px;
line-height:1.44;font-weight:700;letter-spacing:-.024em;color:var(--ink)}
.dslead{margin:var(--v2) 0 0;max-width:44em;font-size:15px;line-height:1.95;color:var(--ink5)}
.dsmeta{display:flex;flex-wrap:wrap;align-items:center;gap:9px 16px;margin-top:var(--v4);
padding:12px 17px;border:1px solid var(--line2);border-radius:var(--r2);background:var(--panel2);
font-family:var(--ff-m);font-size:11px;line-height:1.7;color:var(--dim)}
.dsmeta .mtag{display:inline-flex;align-items:center;height:20px;padding:0 9px;
border:1px solid var(--teal-b);border-radius:var(--r1);background:var(--teal-t);
font-family:var(--ff-s);font-size:10.5px;font-weight:700;line-height:1;color:var(--teal)}
.dsmeta .mtag.stale{border-color:var(--amber-b);background:var(--amber-t);color:var(--amber-d)}
.dswarn{margin-top:12px;padding:13px 17px;border:1px solid var(--amber-b);
border-left:3px solid var(--amber);border-radius:0 var(--r2) var(--r2) 0;background:var(--amber-t);
font-size:13px;line-height:1.85;color:var(--ink5)}
.dshd{display:flex;align-items:baseline;gap:14px;margin:var(--v6) 0 0;padding-bottom:10px;
position:relative;border-bottom:1px solid var(--line)}
.dshd::after{content:'';position:absolute;left:0;bottom:-1px;width:46px;height:2px;
background:var(--rubric)}
.dsno{flex:0 0 auto;font-family:var(--ff-m) !important;letter-spacing:.08em !important;
color:var(--rubric) !important}
.dshd h2{font-family:var(--ff-d);font-size:24px;line-height:1.4;
font-weight:700;letter-spacing:-.022em;color:var(--ink)}
.dscap{margin:var(--v2) 0 0;font-size:13.5px;line-height:1.9;color:var(--ink5)}
.dssub{margin:var(--v4) 0 0;font-family:var(--ff-s);font-size:16px;font-weight:700;
line-height:1.5;letter-spacing:-.018em;color:var(--ink)}
.dsbig{display:flex;align-items:baseline;gap:17px;margin-top:var(--v2);padding:16px 20px;
border:1px solid var(--line2);border-left:3px solid var(--teal);
border-radius:0 var(--r2) var(--r2) 0;background:var(--panel2)}
.dsbigv{font-family:var(--ff-d);font-size:32px;line-height:1.25;font-weight:500;
color:var(--ink);font-variant-numeric:tabular-nums}
.dsbigl{font-size:13.5px;line-height:1.7;color:var(--ink5)}
.dsbigl span{display:block;margin-top:3px;font-family:var(--ff-m);font-size:11px;color:var(--dim)}
.dsload{margin-top:var(--v4);padding:52px 26px;border:1px solid var(--line2);border-radius:var(--r2);
background:var(--panel);text-align:center}
.dsload span{font-size:13.5px;color:var(--ink5)}
.dsload p{margin:10px auto 0;max-width:36em;font-size:12.5px;line-height:1.85;color:var(--dim)}
/* 표 — 폭이 모자라면 표 안에서만 가로로 흐른다. 본문은 절대 안 흐른다. */
.dtable{margin-top:var(--v2);border:1px solid var(--line2);border-radius:var(--r2);
/* background 축약형을 쓰면 위(2장)에서 깐 스크롤 그림자 레이어가 지워진다 — 색만 */
background-color:var(--panel);overflow-x:auto;-webkit-overflow-scrolling:touch}
.dtable table{min-width:880px}
.dtable thead th{background:var(--panel3);border-top:none;border-bottom:1px solid var(--line2);
font-family:var(--ff-s);font-size:11px;font-weight:700;letter-spacing:0;color:var(--ink5)}
.dtable td{vertical-align:top;line-height:1.75;font-size:13px;color:var(--ink5)}
.dtable tbody tr:nth-child(even){background:var(--panel2)}
.dtable tbody tr:hover{background:var(--teal-t)}
.dtable td.k{font-weight:700;color:var(--ink)}
.dtable td.k .dssubline{display:block;margin-top:3px;font-size:11px;font-weight:400;color:var(--dim)}
.dtable td.sub{font-size:12.5px;color:var(--ink4)}
.dtable td.nw,.dtable th.nw{white-space:nowrap}
.dtable td.num,.dtable th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.dtable td.num{font-family:var(--ff-m);font-size:12px;color:var(--ink)}
.dtable td.big{font-size:14px;color:var(--ink)}
.dtable td.step{width:52px;font-family:var(--ff-m);font-size:14px;color:var(--rubric)}
.dtable .sumrow td{border-top:1px solid var(--ink);background:var(--panel3);font-weight:700;color:var(--ink)}
/* 원천 표는 한 원천이 두 줄(본문 + 비고)이라 교차 배경을 직접 지정한다 */
.dtable tbody tr.blk{background:var(--panel)}
.dtable tbody tr.blk.alt{background:var(--panel2)}
.dtable tbody tr.blk:hover{background:var(--teal-t)}
.dtable tr.noterow td{padding-top:0;border-bottom:1px solid var(--line2);
font-size:12.5px;line-height:1.8;color:var(--ink4)}
.dspec .dtable th:first-child:not(.num){min-width:132px}
.nlab{display:inline-block;margin-right:8px;padding:0 7px;border:1px solid var(--line);
border-radius:var(--r1);font-family:var(--ff-s);font-size:10.5px;color:var(--dim)}
.nkey{margin-left:10px;font-family:var(--ff-m);font-size:10.5px;color:var(--dim2)}
.okmark{font-size:11.5px;color:var(--teal)}
.nomark{font-size:11.5px;color:var(--coral-d)}
.dsq{display:block;font-family:var(--ff-m);font-size:12px;line-height:1.6;color:var(--ink);
white-space:nowrap;font-variant-numeric:tabular-nums}
.dsq+.dsq{margin-top:3px}
.dsq i{display:inline-block;margin-right:8px;font-family:var(--ff-s);font-style:normal;
font-size:10.5px;letter-spacing:0;color:var(--dim)}
.dsmiss{font-family:var(--ff-m);font-size:11.5px;color:var(--dim2)}
.stag{white-space:nowrap}
.dsseg{font-family:var(--ff-s);font-size:10.5px;font-weight:700}
.dsseg.pub{color:var(--teal)}
.dsseg.priv{color:var(--amber-d)}
.dsseg.ai{color:var(--dim)}
/* 마지막 섹션이 상단 기준선까지 올라올 자리를 준다. 없으면 '진단 지표'를
눌러도 스크롤이 바닥에서 멈춰 섹션 머리가 화면 중간에 걸린다. */
#sec-metric{min-height:calc(100vh - 96px)}
/* 랜딩 하단 */
.foot{margin-top:var(--v5);border-top:1px solid var(--line2);background:var(--panel2)}
.footin{display:flex;align-items:center;justify-content:space-between;gap:var(--v3);
padding-top:22px;padding-bottom:26px;font-size:12.5px;color:var(--dim)}
.footin .mo{font-size:10.5px;letter-spacing:.14em;color:var(--dim2)}
.footin nav{display:flex;gap:20px}
.footin a{color:var(--ink5)}
.footin a:hover{color:var(--teal)}
/* ══════════════ 11. 모션 · 접근성 ══════════════ */
.rv{opacity:0;transform:translateY(12px)}
.rv.in{opacity:1;transform:none;transition:opacity .5s var(--e1),transform .55s var(--e1)}
.sweep{animation:sweepx 2.4s cubic-bezier(.45,0,.55,1) infinite alternate}
.breathe{animation:breathe 1.5s ease-in-out infinite}
.shim{animation:shim 1.8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes sweepx{0%{left:5%}100%{left:92%}}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes shim{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
.rv{opacity:1 !important;transform:none !important}
.aispin{animation:none;border-top-color:var(--teal-t)}
}
/* ══════════════ 12. 두 벌 — 웹과 모바일 ══════════════
폭에 따라 매끄럽게 변하는 반응형으로 만들지 않는다. 조판은 두 벌뿐이다.
경계는 768px — 그 위는 웹, 아래는 모바일이고, 둘은 서로 다른 문서다.
활자에 clamp() 를 쓰지 않는 것도 같은 이유다 — 폭에 따라 글자가 계속
흔들리면 조판이 아니라 고무줄이 된다. */
/* ══ 웹 ══════════════════════════════════════════════════════════ */
@media (min-width:769px){
/* 좁은 노트북에서 지면이 화면 밖으로 나가지 않게만 잡아 둔다. */
.report.vert .repmain{max-width:min(var(--col),100vw - 44px)}
.page,.gatecard{max-width:calc(100vw - 44px)}
}
/* 좁은 웹 — 설정 바와 상단 띠. 800px 실측: .cb-target 이 0px 로 눌려 '진단 대상'과
기획명이 세로로 한 글자씩 섰고, 상단 '발급 문서' 단추는 두 줄로 꺾였다. 웹 판은
769px 부터이므로 여기서도 조판이 서야 한다 — 반응형이 아니라 웹 판의 하한 방어다. */
@media (min-width:769px) and (max-width:1100px){
.ctlwrap{flex-wrap:wrap;gap:var(--v2) var(--v3)}
.cb-target{flex:1 1 100%;min-width:0} /* 진단 대상은 제 줄을 통째로 */
.cb-right{margin-left:auto}
.top{grid-template-columns:auto minmax(0,1fr) auto;gap:14px;padding:0 18px}
.top .toptitle{display:none} /* 잘려서 말줄임되던 제목 — 아래 설정 바에 있다 */
.topR .gnav{display:none} /* 목차와 자리를 다투던 전역 내비 — 랜딩에만 */
}
.top .btn{white-space:nowrap} /* 단추 글자는 어느 폭에서도 꺾이지 않는다 */
/* 두 단으로 놓을 자리가 없는 노트북 폭에서만 단을 접는다 */
@media (min-width:769px) and (max-width:1180px){
#rep-cr10>div{grid-template-columns:1fr !important}
#rep-cr10>div>div:first-child{min-width:0;overflow-x:auto}
.herorow{grid-template-columns:1fr}
.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
.mktzone .card{grid-template-columns:1fr !important}
.landcol h1{font-size:42px}
.mastt{font-size:34px}
.mastnum .n{font-size:78px}
}
/* ══ 모바일 ══════════════════════════════════════════════════════
손에 들고 한 손으로 읽는 화면이다. 웹을 줄인 것이 아니라 따로 짠다.
· 가운데 정렬을 버린다 — 좁은 폭의 긴 한글은 줄 시작점이 흔들린다.
· 본문을 15.5px 로 올린다.
· 카드 좌우 여백을 줄여 읽는 폭을 번다.
· 고정 요소는 상단 하나만.
· A4 발급물은 줄이지 않고 가로로 넘긴다 — 치수가 곧 신뢰다. */
@media (max-width:768px){
:root{
--v1:6px; --v2:12px; --v3:18px; --v4:26px; --v5:38px; --v6:52px;
--pad:18px; --edge:16px;
--measure:none;
}
body{font-size:15.5px;line-height:1.8}
.vbody,.note,.mdp,.mdul,.bp,.gp,.dscap,.zonelead,.pshelp,.lead{max-width:none}
.wrap{max-width:none;padding:0 var(--edge)}
/* ── 상단 — 두 줄. 위는 서명과 행동, 아래는 목차. ── */
.top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;
height:auto;min-height:0;padding:11px var(--edge);
grid-template-columns:none}
.top.land{flex-wrap:wrap}
.topL{flex:1 1 auto;gap:9px;overflow:visible}
.topR{flex:0 0 auto;gap:12px}
.top .hm{font-size:17px !important}
.top .mo,.top .sep,.top .toptitle,.top .chip,.top .avatar{display:none}
.top .btn{height:34px;padding:0 13px;font-size:12.5px}
.top .topR>a,.top .topR span>a{font-size:13px}
/* 리포트 상단의 전역 내비는 .topR 안에 들어 있다. 거기에 flex:1 0 100%
를 걸면 100% 가 .topR 기준이라 형제인 '발급 문서' 단추가 상자 밖으로
밀려난다 — 실제로 화면 왼쪽 밖(-56px)에 빈 테두리만 보였다.
좁은 화면에서 같은 항목을 두 줄에 두 번 둘 이유도 없으므로 감춘다. */
.topR .gnav{display:none}
.top.land>.gnav{order:3;flex:1 0 100%;gap:18px;margin:0;padding:2px 0 0;
border-left:none;font-size:13.5px;overflow-x:auto;scrollbar-width:none}
.top.land>.gnav::-webkit-scrollbar{display:none}
/* 목차는 상단 바의 마지막 줄이다. 아래쪽 음수 여백을 주면 그만큼
본문이 바 밑으로 빨려 들어가 첫 줄이 잘린다(실측). */
.secnav{order:3;flex:1 0 100%;margin:4px calc(var(--edge) * -1) -11px;
padding:0 var(--edge);border-top:1px solid var(--bar-line)}
.secnav::before,.secnav::after{display:none}
.secnav button{height:38px;padding:0 11px;font-size:13.5px}
/* ── 랜딩 ── */
/* app.js 가 랜딩 첫 구역에 인라인으로 padding:64px 0 56px 을 준다.
손바닥 화면에서 그만큼 비우면 첫 화면이 거의 빈 종이가 된다. */
section:has(>.wrap.hero){padding:24px 0 32px !important}
.hero{padding-top:0}
.landcol{max-width:none;text-align:left}
.landcol h1{font-size:28px;line-height:1.5;letter-spacing:-.026em}
.landcol h1::after{margin:var(--v3) auto 0 0;width:84px}
.landlead{margin:var(--v3) 0 0;max-width:none;font-size:15px;line-height:1.9}
.landnote{text-align:left}
/* 적재 현황 칩 — 인라인 고정 높이라 두 줄이 되면 테두리를 뚫고 나간다 */
.landcol>div[style*="inline-flex"]{
display:flex !important;height:auto !important;padding:9px 13px !important;
align-items:flex-start !important;gap:9px !important;text-align:left}
.landcol>div[style*="inline-flex"] .mo{font-size:11.5px !important;line-height:1.6}
.samples{flex-direction:column;align-items:stretch;gap:8px}
.samplbl{margin:0;padding:4px 0}
.sampbtn{width:100%}
.sampbtn.on{box-shadow:inset 3px 0 0 var(--teal)}
/* ── 기입 양식 — 화면 끝까지 붙인다 ── */
.planform,.seedbox{margin-left:calc(var(--edge) * -1);margin-right:calc(var(--edge) * -1);
border-left:none;border-right:none;border-radius:0}
.landcol .planform{margin-top:var(--v4)}
.pfhd{flex-direction:column;align-items:flex-start;gap:4px;padding:14px var(--edge)}
.pfbd{padding:var(--v3) var(--edge)}
.seedbox{padding:var(--v3) var(--edge)}
.prow{grid-template-columns:1fr;gap:var(--v3)}
.pta-l{min-height:142px}
.pta-s{min-height:92px}
.pslab{font-size:15px}
.drop{flex-direction:column;align-items:stretch;gap:12px}
.dropL{align-items:flex-start}
.dropL>svg{margin-top:3px}
.drop .btn{width:100%}
.seedft{flex-direction:column;align-items:stretch;gap:12px}
.seedft .btn{width:100%}
.seedstat{justify-content:flex-start}
.corpwarn{max-width:none}
/* ── 리포트 ── */
.report,.report.vert{display:block;max-width:none;padding:0;gap:0}
.report.vert .repmain{max-width:none;margin:0;padding:var(--v3) var(--edge) var(--v6)}
.side{width:auto;padding-top:0}
.side-in{position:static;max-height:none;padding:0}
/* 조작 바 — 고정하지 않는다. 상단 바와 겹쳐 붙으면 화면의 3할을 먹는다.
세로로만 쌓으면 첫 화면이 통째로 조작 바가 되므로 두 칸씩 나란히. */
.ctlbar{position:static;background:var(--panel2)}
.ctlwrap{flex-direction:column;align-items:stretch;gap:var(--v3);
padding:var(--v3) var(--edge)}
.cb-title{white-space:normal;font-size:16px;line-height:1.5}
.cb-meta{font-size:10.5px}
.cb-mid{flex-direction:row;align-items:flex-end;gap:var(--v3);width:100%}
.cb-field{flex:1 1 0;min-width:0}
.cb-field input[type=range]{width:100%}
.cb-scale{font-size:9.5px}
.cb-sel{width:100%}
.cb-right{margin-left:0;width:100%;flex-wrap:wrap;gap:10px}
.cb-grade{flex:1 1 100%;justify-content:center}
.ctlbar .btn{flex:1 1 0;height:42px;font-size:13px}
.cb-hist{flex:1 1 100%}
/* 표제부 — 수치를 제목 아래로 내린다 */
.mast{grid-template-columns:1fr;gap:var(--v3);padding:var(--v3) var(--pad)}
.mastL{order:1}
.mastR{order:2;text-align:left;padding-top:var(--v3);border-top:1px solid var(--line3)}
.mastnum,.mastmeta{justify-content:flex-start}
.mastmeta{border-top:none;padding-top:0;margin-top:var(--v2);flex-wrap:wrap}
.mastt{font-size:26px;line-height:1.48;max-width:none}
.mastnum .n{font-size:60px;line-height:1}
.mastsub{font-size:13.5px}
/* 장 표제 · 격자 */
.rsechead{flex-direction:column;align-items:flex-start;gap:5px;margin:var(--v5) 0 var(--v3)}
.rsechead h2{font-size:21px;line-height:1.45}
.secno{font-size:13px !important}
.grid2,.grid3,.herorow{grid-template-columns:1fr;gap:var(--v3)}
.report.vert .grid2,.report.vert .grid3{gap:var(--v3)}
.ind{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--v3)}
.calcsec{padding:var(--v3) var(--pad)}
/* 09-15 — 모바일은 카드 안쪽 폭이 훨씬 좁아(360px 화면 기준 약 296px)
같은 글자 수 상한(28자·110자)이라도 줄 수가 늘어난다 — 실측상 제목은
최대 2줄, 본문은 최대 5줄까지 갈 수 있어 그만큼 높이를 더 준다.
224px 산정: 패딩 15(위)+14(아래) + 머리글 18.4 + 제목 위 여백 9 +
제목 두 줄 43.5(14.5px·줄간격 1.5×2) + 본문 위 여백 6 +
본문 다섯 줄 115.6(12.5px·줄간격 1.85×5) = 221.5 → 224px. */
.aicard{height:224px;margin-top:22px;padding:15px 16px 14px}
.aict{font-size:14.5px;-webkit-line-clamp:2;line-clamp:2}
.aicb{-webkit-line-clamp:5;line-clamp:5}
/* 본문 활자 */
.vlead{font-size:17.5px;line-height:1.8;max-width:none}
.vbody{font-size:15px;line-height:1.9}
.note,.hint{font-size:13px}
.fx{padding:12px 14px;font-size:12px;line-height:2}
.icard>div:nth-child(2){font-size:32px !important}
/* 표는 그 자리 안에서만 가로로 흐른다 — 지면은 절대 안 흐른다 */
.report.vert .card,.report.vert .rblk,.calcsec,
.dtable,.sheet .calcsec{overflow-x:auto;-webkit-overflow-scrolling:touch}
.repmain table{min-width:480px}
td{padding:10px 10px;font-size:13px}
th{padding:9px 10px;font-size:11px}
#rep-red th.nw,#rep-red td.nw{padding-left:7px;padding-right:7px}
/* 스크롤 상자에 음수 여백을 주면 상자 자체가 화면보다 넓어져 지면이
밀린다. 표는 제자리에서만 흐르게 둔다. */
.dtable{margin:var(--v2) 0 0}
#plot{max-width:100% !important;height:auto}
/* 지형도 범례 — 한 줄에 범례 넷 + 안내문까지 못 선다. 범례 항목은 글자
단위로 꺾이지 않게 못박고(세로 붕괴 실측), 안내문은 다음 줄로 내린다. */
.mapcard .cardft{flex-wrap:wrap;gap:10px 14px}
.maplgd{flex-wrap:wrap;gap:8px 14px !important}
.maplgd>span{white-space:nowrap}
.mapcard .cardft>.mo{flex:1 0 100%}
/* 조정 방안 */
.movezone,.mktzone{margin-top:var(--v5)}
.mkthd{flex-wrap:wrap;gap:8px}
/* 줄바꿈 없는 상자에 걸려도 넘치지 않도록 '줄어들 수 있게' 둔다.
flex:1 0 100% (수축 금지) 이던 것이 인라인 플렉스 머리에서 32px 를
밀어냈다 — 기본 폭은 100% 로 두되 수축은 허용한다. */
.mktsrc{margin-left:0;flex:1 1 100%;min-width:0}
/* ── 시트 · 드로어 — 전면 ── */
.ovl{align-items:stretch}
.sheet{max-height:100vh;border-radius:0;overflow-x:auto}
.dpanel{width:100%;max-width:100%;border-radius:0}
.runrow .runt{max-width:calc(100% - 78px)}
.runact .btn{flex:1 1 auto;min-width:0}
.dangerzone{padding:14px}
/* ── 발급 게이트 ── */
.gate{padding:var(--v4) var(--edge) 50px}
.gatecard{width:100%;max-width:none;padding:28px 20px 26px}
.gtitle{font-size:26px;line-height:1.46}
.gp{font-size:14.5px}
.gtab{margin-top:var(--v3)}
.gtr{grid-template-columns:1fr;gap:4px;padding:13px 0}
.gbtn{height:50px;font-size:15px;margin-top:var(--v3)}
/* ── 발급물 — A4 는 줄이지 않고 가로로 넘긴다 ── */
.docwrap{justify-content:flex-start;padding:var(--v3) 0 40px;
overflow-x:auto;-webkit-overflow-scrolling:touch}
.cert{margin:0 var(--edge)}
.briefbar{flex-direction:column;align-items:stretch;gap:12px;padding:14px var(--edge)}
.usepick{width:100%}
.usebtn{flex:1 1 0;padding:0 8px}
.usenote,.restale{padding:13px var(--edge);font-size:13px}
.restale{flex-direction:column;align-items:stretch;gap:10px}
.page{margin:0 var(--edge)}
.footin{flex-direction:column;align-items:flex-start;gap:10px}
/* 아이폰 홈 인디케이터가 마지막 줄을 덮지 않게 — 값이 없는 기기에선 0 */
.report.vert .repmain{padding-bottom:calc(var(--v6) + env(safe-area-inset-bottom,0px))}
.sheet,.dpanel{padding-bottom:env(safe-area-inset-bottom,0px)}
/* ── 데이터 명세 ── */
.dspec{padding:var(--v4) 0 60px}
.dstop{max-width:none}
.dstop h1{font-size:26px;line-height:1.5}
.dslead{max-width:none;font-size:14.5px}
.dsmeta{gap:7px 14px;font-size:10.5px}
.dshd{flex-direction:column;align-items:flex-start;gap:4px;margin-top:var(--v5)}
.dshd h2{font-size:21px}
.dsbig{flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px}
.dsbigv{font-size:28px}
#sec-metric{min-height:0}
.dspec .dtable th:first-child:not(.num){min-width:110px}
/* 모바일 상단 바는 서명 줄 + 목차 줄로 약 100px 이다 */
.rsechead,[id^=rep-],#sec-verdict,#sec-map,#sec-moves,#sec-ind,#sec-calc,#sec-cr,
#sec-books,#sec-readers,#sec-trust,#sec-market,#sec-interpret,.movezone,
#sec-about,#sec-method,#sec-metric{scroll-margin-top:108px}
}
/* ══════════════ 13. 인쇄 ══════════════ */
@media print{
body{background:#fff}
.noprint,.top,.ctlbar{display:none !important}
.page{box-shadow:none;width:auto;margin:0;padding:0}
.ovl{position:static;background:none}
.sheet{max-height:none;box-shadow:none;background:#fff;border-radius:0}
.docwrap{padding:0}
.cert{box-shadow:none;width:auto !important;min-height:0 !important}
.cert.fresh,.cert.fresh .csealwrap{animation:none}
.rv{opacity:1 !important;transform:none !important}
}
/* 수상 배지 — 브랜드 옆, 조용하게 */
/* 수상 띠 — 머리글 바로 아래 한 줄(사용자 지시 2026-09-16). 주최 기관 로고와
한 문장. 배경은 본문 패널보다 한 톤 눌러 머리글과 본문 사이의 경계로 읽히게
한다. 좁은 화면에서는 로고를 줄이고 부제(장관상)를 접는다 — 줄바꿈이 두 줄을
넘기면 띠가 아니라 덩어리가 된다. */
.awardbar{display:flex;align-items:center;justify-content:center;gap:14px;
padding:9px 20px;background:var(--panel2,var(--panel));
border-bottom:1px solid var(--line2);font-size:12.5px;color:var(--ink6)}
.awardbar .awardlogo{height:26px;width:auto;display:block;flex:0 0 auto}
.awardbar .awardtext{letter-spacing:.01em;line-height:1.5}
.awardbar .awardtext b{font-weight:650;color:var(--ink8,var(--ink))}
@media (max-width:760px){
/* 좁은 화면에서는 로고를 위, 문장을 아래로 쌓는다 — 나란히 두면 문장이 두
줄로 꺾이면서 로고 옆에 빈 칸이 생겨 띠가 어그러진다. */
.awardbar{flex-direction:column;gap:5px;padding:9px 14px;font-size:11.5px;text-align:center}
.awardbar .awardlogo{height:19px}
.awardbar .awardmin{display:none}
}
/* 푸터 사업자 정보 — 작고 조용하게, 줄바꿈 허용 */
.foot .bizinfo{display:flex;flex-wrap:wrap;gap:6px 18px;padding:10px 0 22px;font-size:11.5px;color:var(--dim);line-height:1.6}
/* SNS 로그인 단추 (설계 15 + 확장 · 카카오·네이버) — 세 공급자가 같은
틀(.gbtn-social)을 쓰고 색만 각사 브랜드 가이드 톤을 따른다.
margin-bottom 을 여기 둔 이유는 app.js 의 자리표시(#social-slot,
display:none)가 숨겨진 동안에는 여백이 생기지 않게 하려는 것이다. */
.gbtn-social{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:36px;
margin-bottom:10px;border-radius:0;font:inherit;font-size:13px;font-weight:600;
text-decoration:none;box-sizing:border-box}
/* 구글 — 흰 배경·연한 회색 테두리, 호버는 살짝 그림자만. */
.gbtn-google{border:1px solid #DADCE0;background:#fff;color:#3C4043}
.gbtn-google:hover{background:#F7F8F8;box-shadow:0 1px 2px rgba(60,64,67,.15)}
/* 카카오 — #FEE500 바탕에 검은 글자(카카오 로그인 버튼 가이드 톤). */
.gbtn-kakao{border:1px solid #FEE500;background:#FEE500;color:#191919}
.gbtn-kakao:hover{background:#F7DE00}
/* 네이버 — #03C75A 바탕에 흰 글자(네이버 로그인 버튼 가이드 톤). */
.gbtn-naver{border:1px solid #03C75A;background:#03C75A;color:#fff}
.gbtn-naver:hover{background:#02B350}
/* ══════════════ 14. 정적 문서 페이지 — 공통 .doc ══════════════
pricing·refund·terms·privacy 가 각자 인라인