/* ============================================================
  履歴スタジオ — style.css  (PREMIUM DESIGN SYSTEM v2)
  [목차]
  01. 디자인 토큰 (팔레트/그라디언트/그림자/테마)
  02. 리셋·기본 요소·타이포그래피
  03. 헤더 (글래스)
  04. 히어로 (가치 제안 + 플로팅 이력서 모형)
  05. 탭바 (모바일 하단 / 데스크톱 필 탭)
  06. 레이아웃
  07. 카드·폼·버튼
  08. 대시보드
  09. CRUD 리스트
  10. A4 미리보기 (履歴書/職務経歴書)
  11. 사진 스튜디오
  12. 예문 라이브러리
  13. 다이얼로그·토스트·푸터(네이비)
  14. 반응형
  15. 인쇄 전용
  ※ app.js가 참조하는 class/id 명칭은 변경하지 않음
============================================================ */

/* ===== 01. 디자인 토큰 ===== */
/* v2.10 Windows 游ゴシック かすれ(細さ) 대응 — 전문가 표준 기법 (RinoTsuka/jp-font-family 방식)
   로컬 폰트만 참조하므로 웹폰트 다운로드 0, 오프라인 100% 유지.
   Regular급(100~500)은 Medium face로, Bold급(600~900)은 Bold face로 치환 → Mac과 동일 굵기감 */
@font-face{ font-family:"Yu Gothic"; font-weight:100; src:local("Yu Gothic Medium"),local("YuGothic-Medium"); }
@font-face{ font-family:"Yu Gothic"; font-weight:200; src:local("Yu Gothic Medium"),local("YuGothic-Medium"); }
@font-face{ font-family:"Yu Gothic"; font-weight:300; src:local("Yu Gothic Medium"),local("YuGothic-Medium"); }
@font-face{ font-family:"Yu Gothic"; font-weight:400; src:local("Yu Gothic Medium"),local("YuGothic-Medium"); }
@font-face{ font-family:"Yu Gothic"; font-weight:500; src:local("Yu Gothic Medium"),local("YuGothic-Medium"); }
@font-face{ font-family:"Yu Gothic"; font-weight:600; src:local("Yu Gothic Bold"),local("YuGothic-Bold"); }
@font-face{ font-family:"Yu Gothic"; font-weight:700; src:local("Yu Gothic Bold"),local("YuGothic-Bold"); }
@font-face{ font-family:"Yu Gothic"; font-weight:800; src:local("Yu Gothic Bold"),local("YuGothic-Bold"); }
@font-face{ font-family:"Yu Gothic"; font-weight:900; src:local("Yu Gothic Bold"),local("YuGothic-Bold"); }

:root{
  /* 브랜드 팔레트: 딥 네이비 × 로열 블루 × 골드 */
  --brand-1:#1e3a8a; --brand-2:#2f52d4; --brand-3:#4f7cff;
  --grad-brand:linear-gradient(135deg,#1e3a8a 0%,#2f52d4 55%,#4f7bff 100%);
  --grad-gold:linear-gradient(135deg,#f6c945,#eaa50d);
  --gold:#f2b90d; --gold-deep:#c98f06;
  --accent:#2f52d4; --accent-weak:#e8edfb; --accent-fg:#fff;
  --accent2:#0d9488;
  --ok:#15803d; --warn:#b45309; --err:#b91c1c;
  --radius:16px; --radius-s:10px;
  --sh-1:0 1px 2px rgba(15,23,42,.05);
  --sh-2:0 4px 14px rgba(15,23,42,.07), 0 1px 3px rgba(15,23,42,.05);
  --sh-3:0 16px 40px rgba(20,32,80,.14), 0 2px 8px rgba(15,23,42,.06);
  --tap:44px; --max:1180px;
  /* v2.9 v2.10으로 갱신됨 — 일본 표준 폰트 스택 (benchmark: Yahoo!/LINE/リクナビ/note 계열 시스템 폰트 우선 전략)
     iOS=San Francisco / macOS=ヒラギノ / Windows=Segoe UI+游ゴシック / Android=Noto / 미설치 시 순차 폴스백 */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Noto Sans CJK JP","Yu Gothic",Meiryo,"Helvetica Neue",Arial,sans-serif;
  --font-mincho:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","游明朝体",YuMincho,"Noto Serif JP","Noto Serif CJK JP","MS PMincho","MS Mincho",serif;
}
:root, :root[data-theme="light"]{
  --bg:#eef1f8; --panel:#ffffff; --line:#e2e8f4;
  --fg:#101828; --muted:#5b6b84; --input:#fbfcfe;
  --header-bg:rgba(255,255,255,.82);
}
:root[data-theme="dark"]{
  --bg:#070b18; --panel:#101830; --line:#223154;
  --fg:#e9eefb; --muted:#8fa0c0; --input:#0d1528;
  --accent:#5f83f5; --accent-weak:#18255c; --accent2:#14b8a6;
  --grad-brand:linear-gradient(135deg,#274199 0%,#3e63e0 60%,#628cff 100%);
  --header-bg:rgba(10,15,32,.82);
  --sh-2:0 4px 16px rgba(0,0,0,.45); --sh-3:0 18px 44px rgba(0,0,0,.55);
}
@media (prefers-color-scheme:dark){ :root[data-theme="auto"]{
  --bg:#070b18; --panel:#101830; --line:#223154;
  --fg:#e9eefb; --muted:#8fa0c0; --input:#0d1528;
  --accent:#5f83f5; --accent-weak:#18255c; --accent2:#14b8a6;
  --grad-brand:linear-gradient(135deg,#274199 0%,#3e63e0 60%,#628cff 100%);
  --header-bg:rgba(10,15,32,.82);
  --sh-2:0 4px 16px rgba(0,0,0,.45); --sh-3:0 18px 44px rgba(0,0,0,.55);
}}

/* ===== 02. 리셋/기본 ===== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  /* v2.9 모바일 최신 사양: 탭 하이라이트 억제 + 데스크톱 스크롤바 흔들림 방지 */
  -webkit-tap-highlight-color:transparent; scrollbar-gutter:stable; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-sans);
  font-size:15px; line-height:1.75; letter-spacing:.01em;
  /* v2.9 렌더링 품질: 約物アキ 비례 처리 + iOS/맥 크리스핑 + 회전 시 자동확대 억제 */
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-size-adjust:100%; -webkit-text-size-adjust:100%;
}
h1,h2,h3{ line-height:1.35; letter-spacing:.02em; } img{ max-width:100%; }
a{ color:var(--accent); }
:focus-visible{ outline:3px solid color-mix(in srgb,var(--accent) 55%,white); outline-offset:2px; border-radius:8px; }
::selection{ background:#bdd0ff; }
.hidden{ display:none !important; }

/* ===== 02-2. 언어별 줄바꿈 규칙 — 이 사이트는 日本語 전용 =====
   일본어: 단어 단위 단절 개념이 없어 normal + strict(긴칭구리 엄격) 조합,
   긴 URL/영문만 anywhere로 강제 개행. (※ ko: keep-all / en: hyphens:auto 는
   다국어 확장 시에만 추가 — 3개國語 공통 keep-all 적용 금지 원칙 준수) */
html[lang="ja"]{ word-break:normal; overflow-wrap:anywhere; line-break:strict; }
html[lang="ja"] .card p{ text-align:left; }

/* ===== 02-1. SVG 아이콘 유틸 (이모지 대체: 전 OS 동일 렌더링) ===== */
.svg-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
/* stroke/fill은 <use> 섀도우 트리로 '상속'되므로 참조 측 .ic에 지정해야 함
   (스프라이트 루트의 속성은 참조 인스턴스에 전달되지 않음 → 검은 면 버그 방지) */
.ic{ width:1.05em; height:1.05em; flex:none; vertical-align:-.16em;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.tab-ico{ display:inline-flex; }            /* 탭 아이콘 래퍼: SVG 정렬 */
.tab-ico .ic{ width:1em; height:1em; vertical-align:0; }
.preset-btn .pi{ display:inline-flex; }     /* 프리셋 아이콘 래퍼 */
.preset-btn .pi .ic{ width:1.3em; height:1.3em; vertical-align:0; }
.toast .ic{ width:1.15em; height:1.15em; }
.crud-tools .btn .ic{ width:.95em; height:.95em; }
/* 테마 토글: 라이트=달 / 다크=해 (auto+OS다크도 해 표시) */
#btnTheme .ic-sun{ display:none; }
:root[data-theme="dark"] #btnTheme .ic-moon{ display:none; }
:root[data-theme="dark"] #btnTheme .ic-sun{ display:inline-block; }
@media (prefers-color-scheme:dark){
  :root[data-theme="auto"] #btnTheme .ic-moon{ display:none; }
  :root[data-theme="auto"] #btnTheme .ic-sun{ display:inline-block; }
}
hr{ border:0; border-top:1px solid var(--line); margin:1.1rem 0; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
@keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes floaty{ 0%,100%{ transform:rotate(-4deg) translateY(0) } 50%{ transform:rotate(-4deg) translateY(-12px) } }
@keyframes pulse-soft{ 0%,100%{ opacity:.65 } 50%{ opacity:1 } }

/* ===== 03. 헤더 ===== */
/* ===== 03. 헤더 =====
   노치 대응: viewport-fit=cover + safe-area-inset-top 으로 상단 여백 확보.
   로고는 축소 허용(flex-shrink) + 말줄임, 버튼군은 축소 금지 → 360px에서도 비겹침 */
.site-header{ position:sticky; top:0; z-index:40; background:var(--header-bg);
  padding-top:env(safe-area-inset-top);
  backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line); }
.header-inner{ max-width:var(--max); margin:0 auto; padding:.55rem .9rem; display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--fg); min-height:var(--tap);
  flex-shrink:1; min-width:0; }
.brand-icon{ width:38px; height:38px; color:#fff; background:var(--grad-brand); border-radius:11px;
  box-shadow:0 4px 12px rgba(47,82,212,.35); flex:none; position:relative; }
.brand-text{ font-weight:800; font-size:1.08rem; line-height:1.15; display:flex; flex-direction:column; letter-spacing:.03em;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:100%; }
.brand-text small{ font-weight:700; font-size:.66rem; color:var(--muted); letter-spacing:.12em;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.header-actions{ display:flex; gap:.4rem; align-items:center; flex-shrink:0; }
.header-actions .btn{ padding:.42rem .7rem; min-height:42px; }

/* ===== 04. 히어로 (v2.17 전면 재설계 — Stripe/Linear형 랜딩 합성) ===== */
.hero{ position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(1000px 520px at 88% -12%, rgba(95,131,245,.4), transparent 58%),
    radial-gradient(760px 480px at -12% 112%, rgba(242,185,13,.14), transparent 62%),
    linear-gradient(158deg,#0a1242 0%, #16246e 55%, #101c56 100%);
}
.hero::before{ /* 도트 그리드 — 하단으로 갈수록 옅어지는 텍스처 */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.09) 1.1px, transparent 1.7px);
  background-size:24px 24px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.85), transparent 78%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.85), transparent 78%);
}
.hero-inner{ position:relative; z-index:1; max-width:1160px; margin:0 auto;
  padding:clamp(2.8rem,6vw,5rem) clamp(1.1rem,4vw,2.4rem) clamp(1.6rem,3vw,2.4rem);
  display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(1.8rem,4.5vw,3.4rem); align-items:center; }

/* --- 좌컬럼: 카피 --- */
.hero-badge{ display:inline-flex; align-items:center; gap:.45rem; flex-wrap:nowrap;
  font-size:.72rem; font-weight:800; letter-spacing:.05em; white-space:nowrap;
  color:#ffe9a8; background:rgba(242,185,13,.13); border:1px solid rgba(242,185,13,.38);
  padding:.44rem .95rem; border-radius:99px; box-shadow:0 4px 16px rgba(242,185,13,.12) inset; }
.hero-badge .ic{ width:13px; height:13px; color:#ffd84d; }
.hero-copy h1{ margin:1.15rem 0 1rem; font-weight:900; text-wrap:balance;
  font-size:clamp(1.8rem, 4.2vw, 3.05rem); line-height:1.24; letter-spacing:-.01em;
  text-shadow:0 3px 18px rgba(0,0,0,.35); }
.hero-copy h1 .hl{ color:#ffd84d; position:relative; }
.hero-copy h1 .hl::after{ content:""; position:absolute; left:0; right:0; bottom:.06em; height:.3em; z-index:-1;
  background:rgba(242,185,13,.28); border-radius:4px; }
.hero-sub{ margin:0 0 1.6rem; max-width:36em; color:#c3cff6;
  font-size:clamp(.9rem, 1.25vw, 1.02rem); line-height:1.95; }
.hero-cta{ display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; }
.btn.hero-btn{ min-height:54px; padding:.75rem 1.7rem; font-size:1.04rem; font-weight:900; letter-spacing:.01em;
  background:linear-gradient(135deg,#ffd84d,#f2b90d 60%,#e3a307); color:#3a2a02; border:0; border-radius:15px;
  box-shadow:0 10px 28px rgba(242,185,13,.45), 0 2px 0 rgba(255,255,255,.35) inset;
  transition:transform .18s, box-shadow .18s, filter .18s; }
.btn.hero-btn:hover{ transform:translateY(-2px); filter:brightness(1.05);
  box-shadow:0 16px 36px rgba(242,185,13,.55), 0 2px 0 rgba(255,255,255,.4) inset; }
.btn.hero-btn:active{ transform:translateY(0); }
.btn.hero-btn-ghost{ min-height:54px; padding:.75rem 1.45rem; font-size:.98rem; font-weight:800; color:#fff;
  border:1.5px solid rgba(255,255,255,.5); border-radius:15px; background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:background .18s, border-color .18s, transform .18s; }
.btn.hero-btn-ghost:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.75); transform:translateY(-2px); }
.hero-trust{ display:flex; gap:1.05rem; flex-wrap:wrap; margin:1.15rem 0 0; }
.hero-trust span{ display:inline-flex; align-items:center; gap:.35rem;
  font-size:.78rem; font-weight:800; color:#9fe8d4; }
.hero-trust .ic{ width:14px; height:14px; color:#34d3a8; flex:none; }
.hero-steps{ list-style:none; display:flex; align-items:stretch; margin:1.9rem 0 0; padding:.95rem 1.1rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); border-radius:16px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.hero-steps li{ position:relative; flex:1 1 0; display:flex; align-items:center; gap:.6rem; min-width:0; }
.hero-steps li + li{ margin-left:.75rem; padding-left:.85rem; }
.hero-steps li + li::before{ content:""; position:absolute; left:0; top:18%; bottom:18%; width:1px;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,.4), transparent); }
.hs-num{ flex:none; width:30px; height:30px; border-radius:99px; display:grid; place-items:center;
  font-weight:900; font-size:.85rem; background:linear-gradient(135deg,#ffd84d,#eab308); color:#3a2a02;
  box-shadow:0 4px 12px rgba(242,185,13,.45); }
.hs-txt{ min-width:0; }
.hs-txt strong{ display:block; font-size:.8rem; letter-spacing:.01em; white-space:nowrap; }
.hs-txt small{ display:block; font-size:.62rem; font-weight:600; color:#9db1e2; margin-top:.18rem; white-space:nowrap; }

/* --- 우컬럼: 레이어드 서류 합성 --- */
.hero-visual{ position:relative; justify-self:center; width:min(100%, 440px); aspect-ratio:44/49; }
.hv-glow{ position:absolute; inset:-14% -16%; border-radius:50%; filter:blur(34px);
  background:radial-gradient(closest-side, rgba(95,131,245,.55), rgba(95,131,245,.12) 55%, transparent 75%); }
.hv-doc{ position:absolute; background:#fff; color:#24304f; border-radius:14px;
  box-shadow:0 34px 70px rgba(3,8,30,.55), 0 8px 20px rgba(3,8,30,.35); }
.doc-back{ width:76%; left:0; top:10%; padding:1.1rem 1.15rem; transform:rotate(-5deg);
  opacity:.6; filter:saturate(.75) brightness(.985); }
.db-title{ text-align:center; font-family:var(--font-mincho); font-weight:700; font-size:.68rem;
  letter-spacing:.4em; color:#31406e; border-bottom:1.4px solid #c7d2ec; padding-bottom:.5rem; }
.db-line{ height:6px; margin-top:.65rem; border-radius:99px; background:linear-gradient(90deg,#dde5f6,#edf2fc); }
.doc-front{ width:86%; right:0; top:0; padding:1.25rem 1.3rem 1.3rem; transform:rotate(1.8deg); }
.doc-title{ text-align:center; font-family:var(--font-mincho); font-weight:900; font-size:1.02rem;
  letter-spacing:.5em; text-indent:.5em; color:#16204a; border-bottom:2.5px solid #25337f; padding-bottom:.6rem; }
.doc-row1{ display:grid; grid-template-columns:1fr auto; gap:.9rem; align-items:start;
  padding:.85rem 0 .7rem; border-bottom:1px solid #e5eaf6; }
.doc-id{ display:grid; gap:.24rem; }
.doc-kana{ font-size:.58rem; color:#7c89b0; letter-spacing:.06em; }
.doc-name{ font-family:var(--font-mincho); font-size:1.5rem; font-weight:900; color:#0f183a; line-height:1.15; }
.doc-birth{ font-size:.6rem; color:#5a6a94; }
.doc-photo{ width:54px; height:70px; border-radius:8px; display:grid; place-items:center; gap:0;
  background:linear-gradient(165deg,#eaf1ff,#d5e2fa); border:1.5px dashed #9db1e2; color:#6f88c9; }
.doc-photo .ic{ width:18px; height:18px; }
.doc-photo small{ font-size:.5rem; font-weight:800; letter-spacing:.05em; margin-top:-2px; }
.doc-table{ margin-top:.65rem; border:1px solid #e1e8f6; border-radius:8px; overflow:hidden; }
.doc-tr{ display:grid; grid-template-columns:6.2em 1fr; font-size:.6rem; color:#2c3a63; }
.doc-tr span{ padding:.42rem .55rem; border-bottom:1px solid #eef2fb; }
.doc-tr:last-child span{ border-bottom:0; }
.doc-tr .dt-k{ background:#f2f5fd; font-weight:800; color:#46568a; border-right:1px solid #eef2fb; }
.doc-lines{ margin-top:.7rem; display:grid; gap:.45rem; }
.doc-lines div{ height:6px; border-radius:99px; background:linear-gradient(90deg,#e6ecf9,#f3f7fd); }
.doc-gauge{ position:absolute; right:-13px; top:48%; width:80px; height:80px; border-radius:99px;
  display:grid; place-content:center; text-align:center; gap:.1rem;
  background:linear-gradient(135deg,#ffd84d,#eab308); color:#3a2a02; border:3.5px solid #fff;
  box-shadow:0 14px 30px rgba(242,185,13,.5); transform:rotate(-7deg); }
.doc-gauge b{ font-size:1.08rem; font-weight:900; line-height:1; font-variant-numeric:tabular-nums; }
.doc-gauge span{ font-size:.52rem; font-weight:900; letter-spacing:.1em; }
.hero-chip{ position:absolute; z-index:3; display:inline-flex; align-items:center; gap:.4rem;
  padding:.52rem .95rem; border-radius:99px; font-size:.72rem; font-weight:800; white-space:nowrap;
  color:#16204a; background:rgba(255,255,255,.94); border:1px solid rgba(255,255,255,.75);
  box-shadow:0 14px 30px rgba(3,8,30,.4); animation:hvFloat 7s ease-in-out infinite; }
.hero-chip .ic{ width:13px; height:13px; color:var(--accent); flex:none; }
.hero-chip.c1{ left:-7%; top:7%; }
.hero-chip.c2{ right:-5%; bottom:9%; animation-delay:1.4s; }
.hero-chip.c3{ left:-3%; bottom:19%; animation-delay:2.6s; }
@keyframes hvFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@media (prefers-reduced-motion:reduce){ .hero-chip{ animation:none; } }

/* --- 하단 실總 스트립 (정직한 실측 수치) --- */
.hero-stats{ position:relative; z-index:1; max-width:1160px; margin:0 auto;
  padding:0 clamp(1.1rem,4vw,2.4rem) clamp(2.4rem,4vw,3.2rem);
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.7rem,1.8vw,1.2rem); }
.stein{ text-align:center; padding:1.05rem .6rem; border-radius:16px;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.stein b{ display:block; font-size:clamp(1.45rem,2.6vw,1.95rem); font-weight:900; color:#ffd84d;
  font-variant-numeric:tabular-nums; line-height:1.1; }
.stein span{ font-size:.68rem; font-weight:700; color:#b9c6ee; letter-spacing:.02em; }

/* --- 반응형 --- */
@media (max-width:980px){
  .hero-inner{ grid-template-columns:1fr; gap:2.2rem; text-align:left; }
  .hero-visual{ width:min(100%, 400px); margin:0 auto; }
}
@media (max-width:767px){
  .hero-inner{ padding:2.5rem 1.05rem 1.6rem; }
  .hero-copy h1{ margin:1rem 0 .9rem; }
  .hero-steps{ padding:.75rem .7rem; margin-top:1.5rem; }
  .hero-steps li{ gap:.45rem; }
  .hero-steps li + li{ margin-left:.5rem; padding-left:.6rem; }
  .hs-txt strong{ font-size:.7rem; white-space:normal; line-height:1.3; }
  .hs-txt small{ font-size:.54rem; white-space:normal; line-height:1.3; }
  .hs-num{ width:24px; height:24px; font-size:.72rem; }
  .hero-stats{ grid-template-columns:repeat(2,1fr); padding-bottom:2rem; }
  /* 협폭: 카드가 잘리지 않도록 — 비주얼 축소 + 칩/게이지를 컨테이너 안으로 */
  .hero-visual{ width:min(88vw, 330px); }
  .doc-front{ width:94%; }
  .doc-back{ width:70%; }
  .hero-chip{ font-size:.58rem; padding:.4rem .65rem; }
  .hero-chip.c1{ left:0; top:2%; }
  .hero-chip.c2{ right:0; bottom:3%; }
  .hero-chip.c3{ left:0; }
  .doc-gauge{ width:62px; height:62px; right:-6px; border-width:3px; }
  .doc-gauge b{ font-size:.85rem; }
  .doc-title{ font-size:.85rem; }
  .doc-name{ font-size:1.18rem; }
  .doc-tr{ font-size:.55rem; grid-template-columns:5.6em 1fr; }
}
@media (max-width:359px){
  .hero-badge{ font-size:.64rem; white-space:normal; }
  .hs-txt strong{ white-space:normal; }
}

/* ===== 05. 탭바 ===== */
/* ===== 05. 탭바 ===== */
.tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:35;
  display:grid; grid-template-columns:repeat(4,1fr); /* v2.18: 8탭 2행 고정 그리드 — 가로 스크롤 탭바 폐기(탭/스크롤 제스처 충돌·화면 밖 숨은 탭 근본 해결) */
  background:var(--header-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(10,20,50,.08);
  padding-bottom:env(safe-area-inset-bottom);
  padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
.tab-btn{ min-height:54px; border:0; background:none; color:var(--muted); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  font-size:clamp(.6rem, 2.9vw, .7rem); font-weight:800; padding:.4rem .2rem; transition:color .15s; letter-spacing:.01em;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent; } /* iOS 더블탭지연 제거 + 탭 하이라이트 정리 */
.tab-btn .tab-lbl{ white-space:nowrap; }
.tab-btn .tab-ico{ font-size:1.25rem; transition:transform .18s; }
.tab-btn.active{ color:var(--accent); box-shadow:inset 0 3px 0 var(--accent); }
.tab-btn.active .tab-ico{ transform:translateY(-1px) scale(1.12); }

/* ===== 06. 레이아웃 ===== */
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:fadeUp .3s ease; }
main.main{ max-width:var(--max); margin:0 auto; padding:1rem .9rem calc(116px + 1.2rem + env(safe-area-inset-bottom)); }
.workcols{ display:grid; grid-template-columns:1fr; gap:1.1rem; align-items:start; }
.form-col,.pv-col,.dash-side{ min-width:0; }   /* 그리드 오버플로 방지 */
.dz-inner{ padding:.5rem; }

/* ===== 07. 카드/폼/버튼 ===== */
.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.15rem; margin-bottom:1.1rem; box-shadow:var(--sh-2); }
.card-title{ margin:0 0 .8rem; font-size:1.02rem; font-weight:800; display:flex; align-items:center; gap:.5rem; }
.card-title::after{ content:""; flex:0 0 26px; height:3px; border-radius:2px; background:var(--grad-brand); opacity:.85; }
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.head-actions{ display:flex; gap:.35rem; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.ex-tools{ display:inline-flex; gap:.3rem; align-items:center; flex:none; }
#btnAutoEdu{ white-space:nowrap; }
.card-head .card-title{ margin:0; }

.field{ margin-bottom:.85rem; }
.field label{ display:block; font-weight:800; font-size:.85rem; margin-bottom:.3rem; letter-spacing:.02em; }
.req{ display:inline-block; background:linear-gradient(135deg,#e11d48,#f43f5e); color:#fff; font-size:.6rem; font-weight:800;
  border-radius:6px; padding:.1em .45em; margin-left:.45em; vertical-align:2px; letter-spacing:.05em; }
input[type="text"],input[type="tel"],input[type="email"],input[type="date"],input[type="search"],input[type="number"],select,textarea{
  width:100%; min-height:var(--tap); padding:.6rem .75rem; font:inherit; color:var(--fg);
  background:var(--input); border:1.5px solid var(--line); border-radius:var(--radius-s);
  transition:border-color .15s, box-shadow .15s, background .15s; }
input:focus,select:focus,textarea:focus{
  border-color:var(--accent); background:var(--panel);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent); outline:none; }
textarea{ resize:vertical; line-height:1.75; }
input.invalid,textarea.invalid{ border-color:var(--err); background:color-mix(in srgb,var(--err) 5%,var(--input)); }
.field-err{ color:var(--err); font-size:.76rem; margin:.25rem 0 0; min-height:1em; font-weight:600; }
.hint{ color:var(--muted); font-size:.78rem; margin:.35rem 0 0; line-height:1.6; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.check{ display:flex; align-items:center; gap:.55rem; min-height:var(--tap); font-size:.9rem; cursor:pointer; font-weight:600; }
.check input{ width:22px; height:22px; accent-color:var(--accent); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  min-height:var(--tap); padding:.58rem 1.05rem; border-radius:12px; cursor:pointer;
  border:1.5px solid var(--line); background:var(--panel); color:var(--fg); font:inherit; font-weight:800; text-decoration:none;
  box-shadow:var(--sh-1); transition:transform .14s, box-shadow .18s, filter .15s, background .15s; letter-spacing:.02em; }
.btn:hover{ transform:translateY(-1px); box-shadow:var(--sh-2); }
.btn:active{ transform:scale(.97); }
.btn.primary{ background:var(--grad-brand); border-color:transparent; color:#fff;
  box-shadow:0 6px 18px rgba(47,82,212,.4); }
.btn.primary:hover{ filter:brightness(1.07); }
.btn.accent{ background:linear-gradient(135deg,#0f9d8f,#12b8a6); border-color:transparent; color:#fff;
  box-shadow:0 6px 18px rgba(13,148,136,.35); }
.btn.ghost{ background:transparent; box-shadow:none; }
.btn.ghost:hover{ background:color-mix(in srgb,var(--accent) 8%,var(--panel)); }
.btn.danger{ color:var(--err); border-color:color-mix(in srgb,var(--err) 40%,var(--line)); }
.btn.small{ min-height:38px; padding:.32rem .72rem; font-size:.84rem; border-radius:10px; }
.btn.big{ width:100%; min-height:54px; font-size:1.02rem; border-radius:14px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.action-row{ display:flex; gap:.6rem; margin-top:.5rem; flex-wrap:wrap; }
.action-row.wrap{ flex-wrap:wrap; }
.gauge{ height:9px; background:var(--line); border-radius:99px; overflow:hidden; margin-top:.45rem; }
.gauge-bar{ height:100%; width:0%; background:var(--grad-brand); border-radius:99px; transition:width .35s, background .3s; }

/* ===== 08. 대시보드 ===== */
.dashboard{ background:linear-gradient(170deg, var(--panel) 60%, color-mix(in srgb,var(--accent) 4%,var(--panel)));
  font-variant-numeric:tabular-nums; } /* v2.9 통계 숫자 정각 정렬 */
.dashboard .dash-grid{ display:grid; grid-template-columns:112px 1fr; gap:1rem; align-items:center; }
.donut-wrap{ position:relative; width:112px; height:112px; }
.donut{ width:112px; height:112px; transform:rotate(-90deg); }
.donut circle{ fill:none; stroke-width:12; }
.donut-bg{ stroke:var(--line); }
.donut-val{ stroke:var(--accent); stroke-linecap:round; stroke-dasharray:326.7; stroke-dashoffset:326.7;
  transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.3,1); filter:drop-shadow(0 2px 4px rgba(47,82,212,.4)); }
.donut-text{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.donut-text strong{ font-size:1.3rem; font-weight:800; }
.donut-text span{ font-size:.64rem; color:var(--muted); font-weight:800; letter-spacing:.08em; }
.secbars{ display:grid; gap:.4rem; margin-bottom:.55rem; }
.secbar{ display:grid; grid-template-columns:64px 1fr 36px; gap:.5rem; align-items:center; font-size:.74rem; color:var(--muted); font-weight:700; }
.secbar .track{ height:8px; background:var(--line); border-radius:99px; overflow:hidden; }
.secbar .fill{ height:100%; background:linear-gradient(90deg,#22c55e,#16a34a); border-radius:99px; transition:width .45s; }
.warn-list{ list-style:none; margin:0; padding:0; display:grid; gap:.3rem; }
.warn-list li{ display:flex; align-items:flex-start; gap:.4rem; font-size:.76rem; padding:.4rem .6rem; border-radius:9px; font-weight:600;
  background:color-mix(in srgb,var(--warn) 10%,var(--panel)); color:var(--warn);
  border:1px solid color-mix(in srgb,var(--warn) 32%,var(--line)); }
/* 경고/완료 마커: data-URI SVG (이모지 폰트 불필요, currentColor 상속) */
.warn-list li::before{ content:""; width:13px; height:13px; flex:none; margin-top:.18em;
  background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") center/contain no-repeat; }
.warn-list li.ok-item{ background:color-mix(in srgb,var(--ok) 9%,var(--panel)); color:var(--ok);
  border-color:color-mix(in srgb,var(--ok) 32%,var(--line)); }
.warn-list li.ok-item::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
/* 사진 경고 문구 (아이콘+본문 플렉스) */
.warn-ico{ display:flex; align-items:flex-start; gap:.4rem; }
.warn-ico .ic{ width:1.1em; height:1.1em; margin-top:.2em; color:#d97706; }

/* ===== 09. CRUD 리스트 ===== */
.crud-list{ display:grid; gap:.65rem; margin:.6rem 0; }
.crud-item{ border:1px solid var(--line); border-radius:12px; padding:.65rem;
  background:color-mix(in srgb,var(--panel) 65%,var(--bg)); transition:box-shadow .15s, border-color .15s; }
.crud-item:hover{ border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); box-shadow:var(--sh-1); }
.crud-row{ display:grid; grid-template-columns:1fr; gap:.45rem; }
.crud-tools{ display:flex; gap:.35rem; }
.crud-tools .btn{ min-height:38px; min-width:44px; padding:.25rem .55rem; }
.crud-bottom{ display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-top:.5rem; }
.check-inline{ display:flex; align-items:center; gap:.45rem; font-size:.82rem; color:var(--muted); cursor:pointer; min-height:38px; font-weight:700; }
.check-inline input{ width:20px; height:20px; accent-color:var(--accent); }
.empty-note{ color:var(--muted); font-size:.84rem; padding:1rem; text-align:center; font-weight:600;
  border:1.5px dashed color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius:12px;
  background:color-mix(in srgb,var(--accent) 3%,transparent); }

/* ===== 10. A4 미리보기 (실물 렌더 — 값 유지) ===== */
.pv-col{ position:relative; }
.pv-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.pv-label{ font-size:.72rem; font-weight:800; color:var(--muted); letter-spacing:.12em;
  background:var(--panel); border:1px solid var(--line); padding:.3rem .7rem; border-radius:99px; box-shadow:var(--sh-1); }
.pv-fit{ overflow-x:auto; border-radius:12px; }
.a4{ width:210mm; height:297mm; background:#fff; color:#000; padding:11mm 12mm; position:relative; transform-origin:top left;
  font-family:var(--font-mincho); font-size:3.4mm;
  box-shadow:0 24px 60px rgba(8,15,50,.35), 0 4px 14px rgba(8,15,50,.2); border-radius:2px; flex:none; }
.a4.tall{ height:auto; min-height:297mm; }
/* 退職届/退職願 서식 (탭5) — 정통 일본식 레이아웃 */
.a4 .tq-submit{ text-align:right; font-size:3.6mm; margin-bottom:6mm; }
.a4 .tq-addr{ font-size:4mm; line-height:1.9; margin:2mm 0 10mm; }
.a4 .tq-addr p{ margin:0; text-decoration:underline; text-underline-offset:1.2mm; text-decoration-thickness:.3mm; }
.a4 .tq-title{ text-align:center; font-size:8.5mm; font-weight:700; letter-spacing:10mm; text-indent:10mm; margin:6mm 0 14mm; }
.a4 .tq-hazime{ font-size:4mm; margin:0 0 3mm; }
.a4 .tq-body{ font-size:4.4mm; line-height:2.15; text-indent:4.4mm; margin:0 0 5mm; }
.a4 .tq-sign{ margin-top:20mm; text-align:right; font-size:4.2mm; line-height:2; }
.a4 .tq-sign p{ margin:0; padding-right:8mm; }
.a4.modern .tq-title{ letter-spacing:8mm; text-indent:8mm; }

/* --- 탭6: 送付状 A4 레이아웃 (일본 비즈니스 문서 정통형) --- */
.a4 .sf-date{ text-align:right; font-size:3.6mm; margin-bottom:6mm; }
.a4 .sf-addr{ font-size:4.2mm; line-height:1.9; margin:8mm 0 4mm; }
.a4 .sf-addr p{ margin:0; }
.a4 .sf-sender{ text-align:right; font-size:3.4mm; line-height:1.8; margin:4mm 0 10mm; }
.a4 .sf-sender p{ margin:0; padding-right:2mm; }
.a4 .sf-sbj{ text-align:center; font-size:4.6mm; font-weight:700; margin:8mm 0 9mm;
  text-decoration:underline; text-underline-offset:1.6mm; text-decoration-thickness:.35mm; }
.a4 .sf-body{ font-size:4mm; line-height:2.05; margin:0 0 2.5mm; text-indent:4mm; }
.a4 .sf-body.first{ text-indent:0; }               /* 拝啓 행은 들여쓰기 없음 */
.a4 .sf-ktg{ text-align:right; font-size:4mm; margin:2mm 4mm 10mm 0; }
.a4 .sf-list{ width:fit-content; margin:6mm auto; font-size:4mm; line-height:2; }
.a4 .sf-list p{ margin:0; text-align:left; }
.a4 .sf-list .ki{ text-align:center; margin-bottom:2mm; }
.a4 .sf-list .ijo{ text-align:right; margin-top:2mm; }
.a4.modern{ font-family:var(--font-sans); }
.a4 .r-title{ text-align:center; font-size:6.5mm; font-weight:700; letter-spacing:6mm; margin:0 0 3mm; }
.a4 .r-date{ text-align:right; font-size:3.2mm; margin-bottom:2mm; }
.r-idwrap{ display:grid; grid-template-columns:1fr 30mm; gap:4mm; }
.r-photo{ width:30mm; height:40mm; border:.2mm solid #555; display:flex; align-items:center; justify-content:center;
  color:#888; font-size:3mm; text-align:center; background:#fafafa; overflow:hidden; white-space:pre-line; }
.r-photo img{ width:100%; height:100%; object-fit:cover; }
.r-ph-cap{ font-size:2.6mm; color:#666; text-align:center; margin-top:.6mm; }
.r-rows{ border-top:.35mm solid #333; border-left:.35mm solid #333; }
.r-row{ display:grid; grid-template-columns:18mm 15mm 1fr 26mm; border-bottom:.2mm solid #555; }
.r-row .c{ border-right:.2mm solid #555; padding:1.2mm 1.6mm; min-height:8mm; display:flex; align-items:center; }
.r-row .c.center{ justify-content:center; }
.r-row.name .c{ min-height:14mm; }
.r-name-kana{ font-size:2.6mm; color:#222; display:block; }
.r-name{ font-size:7mm; font-weight:700; letter-spacing:1.5mm; display:block; margin-top:.5mm; }
.r-sect{ background:#f0f0f0; text-align:center; font-weight:700; letter-spacing:4mm; padding:1mm 0;
  border-bottom:.2mm solid #555; border-right:.2mm solid #555; grid-column:1 / -1; }
.a4.modern .r-sect{ background:#e9eefc; color:#1e3a8a; letter-spacing:2mm; }
.hist .c{ min-height:7.2mm; padding:.8mm 1.6mm; }
.hist .center{ justify-content:center; }
.r-blankbox{ border-bottom:.2mm solid #555; border-right:.2mm solid #555; }
.r-mot .c{ display:block; white-space:pre-wrap; line-height:1.9; padding:2.2mm; min-height:34mm; grid-column:1 / -1; }
.s-title{ text-align:center; font-size:6mm; font-weight:700; letter-spacing:5mm; margin-bottom:4mm; }
.s-date{ text-align:right; margin-bottom:1mm; }
.s-name{ text-align:right; margin-bottom:5mm; font-size:4mm; }
.s-h{ font-weight:700; border:.2mm solid #555; background:#f0f0f0; padding:1.2mm 2.4mm; margin:4mm 0 0; letter-spacing:2mm; }
.s-box{ border:.2mm solid #555; border-top:0; padding:2.4mm; white-space:pre-wrap; line-height:1.9; min-height:22mm; }
.s-job{ border:.2mm solid #555; border-top:0; padding:2.4mm; }
.s-job:last-child{ margin-bottom:2mm; }
.s-job .j-head{ display:flex; justify-content:space-between; font-weight:700; }
.s-job .j-role{ margin-top:1.2mm; white-space:pre-wrap; line-height:1.85; color:#111; }

/* ===== 11. 사진 스튜디오 ===== */
.photo-layout{ max-width:720px; margin:0 auto; }
.steps{ display:flex; gap:.35rem; list-style:none; margin:0 0 1.1rem; padding:0; position:relative; }
.step{ flex:1; text-align:center; font-size:.68rem; font-weight:800; color:var(--muted);
  padding:.55rem .1rem; border-radius:99px; background:var(--panel); border:1.5px solid var(--line);
  box-shadow:var(--sh-1); transition:.2s; }
.step.done{ background:var(--grad-brand); color:#fff; border-color:transparent;
  box-shadow:0 4px 14px rgba(47,82,212,.4); }
.dropzone{ border:2px dashed color-mix(in srgb,var(--accent) 45%,var(--line)); cursor:pointer; min-height:280px;
  display:flex; align-items:center; justify-content:center; text-align:center; transition:.22s; border-radius:20px;
  background:linear-gradient(160deg, var(--panel) 40%, color-mix(in srgb,var(--accent) 4%,var(--panel))); }
.dropzone:hover{ border-color:var(--accent); box-shadow:var(--sh-3); }
.dropzone.drag{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,var(--panel)); transform:scale(1.01); }
.dz-ico{ display:inline-flex; color:var(--brand-2); filter:drop-shadow(0 6px 12px rgba(47,82,212,.3)); animation:pulse-soft 3.5s ease-in-out infinite; }
.dz-svg{ width:48px; height:48px; }
.dz-title{ font-weight:800; font-size:1.05rem; margin:.5rem 0 .25rem; }
.dz-sub{ color:var(--muted); font-size:.8rem; margin:0 0 1.1rem; }
.crop-stage,.edit-panel{ text-align:center; }
.crop-canvas{ max-width:100%; height:auto; border-radius:14px; touch-action:none; background:#0b1020; cursor:grab;
  box-shadow:var(--sh-3); }
.edit-canvas{ max-width:min(100%,360px); height:auto; border-radius:14px; touch-action:none; background:#0b1020;
  box-shadow:var(--sh-3); }
.edit-canvas-wrap{ margin:.9rem 0; }
.slider-row{ display:grid; grid-template-columns:110px 1fr; align-items:center; gap:.6rem; margin:.5rem 0; text-align:left; }
.slider-row label{ font-size:.8rem; font-weight:800; color:var(--muted); }
input[type="range"]{ width:100%; height:34px; accent-color:var(--accent); cursor:pointer; }
.preset-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-bottom:.9rem; }
.preset-btn{ display:flex; flex-direction:column; align-items:center; gap:.25rem; padding:.7rem .2rem; min-height:64px;
  border-radius:12px; border:1.5px solid var(--line); background:var(--panel); cursor:pointer;
  font-size:.72rem; font-weight:800; color:var(--fg); box-shadow:var(--sh-1); transition:.16s; }
.preset-btn .pi{ font-size:1.4rem; transition:transform .15s; }
.preset-btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
.preset-btn.active{ border-color:var(--accent); background:var(--accent-weak); color:var(--accent); box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 25%,transparent); }
.preset-btn.active .pi{ transform:scale(1.15); }
.bg-row{ display:flex; gap:.7rem; align-items:center; justify-content:center; margin:.5rem 0; flex-wrap:wrap; }
.bg-label{ font-size:.82rem; font-weight:800; color:var(--muted); }
.bg-chip{ display:flex; align-items:center; gap:.35rem; min-height:var(--tap); padding:.25rem .7rem; border:1.5px solid var(--line);
  border-radius:99px; cursor:pointer; font-size:.84rem; font-weight:700; background:var(--panel); transition:.15s; }
.bg-chip:has(input:checked){ border-color:var(--accent); background:var(--accent-weak); color:var(--accent); box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 22%,transparent); }
.bg-chip input{ accent-color:var(--accent); width:18px; height:18px; }
.bg-chip .sw{ width:18px; height:18px; border-radius:50%; border:1px solid var(--line); display:inline-block; }
.brush-box{ text-align:left; margin:.6rem 0; border:1px solid var(--line); border-radius:12px; padding:0 .7rem; background:color-mix(in srgb,var(--panel) 70%,var(--bg)); }
.brush-box summary{ cursor:pointer; min-height:var(--tap); display:flex; align-items:center; font-weight:800; font-size:.88rem; }
.brush-ctl{ display:flex; gap:.5rem; align-items:center; padding:.2rem 0 .7rem; }
.brush-ctl .btn.on{ background:var(--grad-brand); color:#fff; border-color:transparent; }
.compare-row{ display:flex; gap:.5rem; justify-content:center; margin:.5rem 0; flex-wrap:wrap; }
.warn-ico{ text-align:left; margin-top:.9rem; }

/* ===== 12. 예문 라이브러리 ===== */
.lib-ctl{ display:grid; gap:.65rem; margin-bottom:1.1rem; }
.chip-row{ display:flex; flex-wrap:wrap; gap:.45rem; }
.chip{ min-height:var(--tap); padding:.35rem 1rem; border-radius:99px; border:1.5px solid var(--line);
  background:var(--panel); font:inherit; font-weight:800; font-size:.83rem; color:var(--fg); cursor:pointer;
  box-shadow:var(--sh-1); transition:.15s; }
.chip:hover{ border-color:color-mix(in srgb,var(--accent) 50%,var(--line)); color:var(--accent); }
.chip.active{ background:var(--grad-brand); border-color:transparent; color:#fff; box-shadow:0 5px 14px rgba(47,82,212,.4); }
.ex-list{ display:grid; gap:.75rem; }
.ex-card{ border:1px solid var(--line); border-radius:14px; padding:.9rem; background:var(--panel);
  box-shadow:var(--sh-1); transition:.16s; }
.ex-card:hover{ box-shadow:var(--sh-2); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); }
.ex-head{ display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-bottom:.35rem; }
.ex-cat{ font-size:.66rem; font-weight:800; color:var(--accent); background:var(--accent-weak); border-radius:6px; padding:.15rem .55rem; letter-spacing:.04em; }
.ex-title{ font-weight:800; font-size:.94rem; margin:.15rem 0; }
.ex-text{ font-size:.84rem; line-height:1.85; color:var(--fg); white-space:pre-wrap; margin:.35rem 0 .55rem;
  background:color-mix(in srgb,var(--panel) 55%,var(--bg)); border:1px solid var(--line); border-radius:10px; padding:.7rem; }
.tip-list{ margin:0; padding-left:1.2rem; display:grid; gap:.45rem; font-size:.86rem; line-height:1.75; }
.tip-list li::marker{ content:"✔ "; color:var(--ok); }

/* ===== 12-B. 志望動機 셀프 진단 (v2.11) ===== */
.diag-card{ border-left:4px solid var(--gold); }
.diag-note{ font-size:.74rem; color:var(--muted); margin-top:.7rem; }
.diag-score{ display:flex; align-items:center; gap:.9rem; margin:.9rem 0 .35rem; }
.diag-score .gauge{ flex:1; margin-top:0; }
.diag-pct{ font-size:1.55rem; font-weight:800; min-width:74px; text-align:right; font-variant-numeric:tabular-nums; }
.diag-verdict{ font-weight:800; font-size:.94rem; margin:.15rem 0 .7rem; }
.diag-rows{ display:grid; gap:.35rem; margin:.35rem 0 .2rem; }
.diag-row{ display:flex; gap:.55rem; align-items:flex-start; border:1px solid var(--line); border-radius:10px;
  padding:.5rem .7rem; font-size:.82rem; background:color-mix(in srgb,var(--panel) 65%,var(--bg)); }
.diag-row .ic{ width:16px; height:16px; flex:none; margin-top:.12rem; }
.diag-row.pass .ic{ color:var(--ok); }
.diag-row.warn .ic{ color:var(--warn); }
.diag-row.fail .ic{ color:var(--err); }
.diag-row small{ display:block; color:var(--muted); font-size:.74rem; line-height:1.55; margin-top:.1rem; }

/* ===== 12-C. 신뢰 스트립 (v2.11 가치 부각) ===== */
.why-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; margin-bottom:1.4rem; }
.why-item{ display:flex; gap:.7rem; align-items:flex-start; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:.9rem 1rem; box-shadow:var(--sh-1); }
.why-item .ic{ width:22px; height:22px; color:var(--gold-deep); flex:none; margin-top:.15rem; }
.why-item strong{ display:block; font-size:.88rem; }
.why-item span{ display:block; font-size:.74rem; color:var(--muted); margin-top:.15rem; line-height:1.6; }
.why-more{ grid-column:1 / -1; background:var(--panel); border:1px dashed var(--line); border-radius:14px;
  padding:.55rem 1rem; font-size:.82rem; }
.why-more summary{ cursor:pointer; min-height:38px; display:flex; align-items:center; font-weight:800; color:var(--accent); }
.why-more ul{ margin:.3rem 0 .5rem; padding-left:1.2rem; line-height:1.9; color:var(--muted); }
@media (max-width:767px){ .why-strip{ grid-template-columns:1fr; gap:.6rem; } }

/* ===== 12-D. 模擬面接 (탭7, v2.12) ===== */
.mq-count{ margin:.55rem 0 .7rem; font-weight:700; }
.mq-item{ border:1px solid var(--line); border-radius:12px; background:var(--panel); margin:.5rem 0;
  overflow:hidden; box-shadow:var(--sh-1); }
.mq-item summary{ cursor:pointer; list-style:none; display:flex; gap:.6rem; align-items:flex-start;
  padding:.8rem .95rem; font-weight:800; line-height:1.55; min-height:44px; }
.mq-item summary::-webkit-details-marker{ display:none; }
.mq-item summary::after{ content:"＋"; margin-left:auto; color:var(--accent); font-weight:800; flex:none; }
.mq-item[open] summary::after{ content:"−"; }
.mq-item summary:focus-visible{ outline:3px solid var(--accent); outline-offset:-3px; border-radius:12px; }
.mq-tag{ flex:none; font-size:.66rem; font-weight:800; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 13%, transparent); border-radius:99px;
  padding:.16rem .55rem; margin-top:.08rem; white-space:nowrap; }
.mq-tag.gold{ color:var(--gold-deep); background:color-mix(in srgb, var(--gold) 22%, transparent); }
.mq-body{ padding:0 .95rem .85rem; display:grid; gap:.45rem; }
.mq-row{ display:flex; gap:.55rem; font-size:.85rem; line-height:1.65; }
.mq-row .mq-k{ flex:none; width:3.2em; font-weight:800; }
.mq-row.why .mq-k{ color:var(--accent); }
.mq-row.tip .mq-k{ color:var(--ok); }
.mq-row.ng .mq-k{ color:var(--err); }
.mq-copy{ justify-self:start; }
.mq-deeplead{ font-weight:800; margin:.9rem 0 .3rem; }
.mq-deep{ border-left:4px solid var(--gold); border-radius:12px; background:var(--panel);
  padding:.75rem .95rem; margin:.55rem 0; box-shadow:var(--sh-1); }
.mq-deepq{ font-weight:800; line-height:1.6; margin:0 0 .4rem; }
.mq-deeprow{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }

/* ===== 12-E. 内定対応パック (탭8, v2.14) ===== */
.pay-card{ border-left:4px solid var(--accent2); }
.pay-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.pay-grid .field{ margin-bottom:.4rem; }
.check-row{ display:flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:700;
  min-height:44px; cursor:pointer; margin:.3rem 0 .4rem; }
.check-row input{ width:20px; height:20px; accent-color:var(--accent); flex:none; }
.pay-result{ margin-top:.7rem; }
.pay-big{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.pay-label{ font-size:.8rem; font-weight:800; color:var(--muted); }
.pay-value{ font-size:1.9rem; font-weight:900; color:var(--accent2); font-variant-numeric:tabular-nums; }
.pay-sub{ font-size:.8rem; color:var(--muted); margin:.15rem 0 .2rem; font-variant-numeric:tabular-nums; }
.pay-bar{ display:grid; grid-template-columns:5.4em 1fr 8.6em; align-items:center; gap:.5rem;
  font-size:.78rem; margin:.3rem 0; }
.pay-bar .pay-k{ font-weight:800; }
.pay-track{ height:10px; border-radius:99px; background:var(--accent-weak); overflow:hidden; display:block; }
.pay-fill{ display:block; height:100%; border-radius:99px; transition:width .35s; }
.pay-fill.soc{ background:var(--accent); }
.pay-fill.tax{ background:var(--warn); }
.pay-fill.jumin{ background:var(--err); }
.pay-bar .pay-v{ text-align:right; font-variant-numeric:tabular-nums; color:var(--muted); }
.pay-cmp{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.pay-cmphead{ font-weight:900; margin:0 0 .4rem; color:var(--accent); }
.pay-insight{ border-left:3px solid var(--gold); padding-left:.6rem; margin-top:.5rem !important; }
.mail-view{ white-space:pre-wrap; border:1px dashed var(--line); border-radius:12px;
  background:var(--accent-weak); padding:.9rem 1rem; font-size:.83rem; line-height:1.8;
  margin-top:.6rem; max-height:420px; overflow-y:auto; }
@media (max-width:767px){ .pay-grid{ grid-template-columns:1fr; } .pay-cmp{ grid-template-columns:1fr; } }

/* ===== 13. 다이얼로그/토스트/푸터 ===== */
dialog{ border:1px solid var(--line); border-radius:20px; background:var(--panel); color:var(--fg);
  padding:0; width:min(94vw,580px); box-shadow:0 30px 80px rgba(5,12,40,.45); }
dialog::backdrop{ background:rgba(4,8,24,.6); backdrop-filter:blur(4px); }
.dlg-inner{ padding:1.25rem; position:relative; }
.dlg-inner h2{ margin-top:0; font-size:1.12rem; font-weight:800; }
.dlg-close{ margin-top:.9rem; width:100%; }
.zoom-box{ overflow:auto; max-height:80vh; max-height:80dvh; border-radius:8px; } /* dvh: iOS URL바 가변 대응 */
.zoom-box .a4{ transform:none !important; box-shadow:none; }

#toastRoot{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(112px + 12px + env(safe-area-inset-bottom));
  z-index:60; display:grid; gap:.5rem; width:min(92vw,420px); pointer-events:none; }
.toast{ pointer-events:auto; display:flex; align-items:center; gap:.55rem; background:#111a33; color:#f1f5ff;
  border:1px solid #2a3a6b; border-left:5px solid var(--brand-3); border-radius:12px; padding:.75rem 1rem;
  font-size:.85rem; font-weight:700; box-shadow:0 14px 34px rgba(3,8,30,.5); animation:fadeUp .25s ease; }
.toast.success{ border-left-color:#22c55e; }
.toast.error{ border-left-color:#f43f5e; }
.toast.warn{ border-left-color:#f2b90d; }
.toast.out{ opacity:0; transform:translateY(8px); transition:.3s; }

.site-footer{ margin-top:2rem; padding:2.4rem 1rem calc(150px + env(safe-area-inset-bottom)); text-align:center;
  background:linear-gradient(170deg,#0e1734,#0a1128); color:#93a3c7; font-size:.8rem; }
.foot-links{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; justify-content:center; margin-bottom:.7rem; }
.foot-links a{ color:#b9c6e6; text-decoration:none; min-height:var(--tap); display:inline-flex; align-items:center; font-weight:700; transition:color .15s; }
.foot-links a:hover{ color:#fff; }
.foot-note{ margin:0; letter-spacing:.05em; }
.ad-slot{ display:none; margin:1.2rem auto 0; min-height:90px; max-width:728px;
  background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.2); border-radius:12px; }
.ad-slot[data-ad-on="1"]{ display:block; }

/* ===== 14. 반응형 ===== */
/* ===== 모바일 전용: 헤더 한 줄 유지 (버튼=아이콘만, 라벨 숨김) ===== */
@media (max-width:767px){
  .header-inner{ padding:.5rem .7rem; gap:.4rem; flex-wrap:nowrap; }
  .brand{ gap:.45rem; min-height:44px; flex:none; min-width:0; }
  .brand-icon{ width:32px; height:32px; border-radius:9px; flex:none; }
  .brand-text{ font-size:.95rem; white-space:nowrap; }
  .brand-text small{ font-size:.58rem; letter-spacing:.1em; }
  .header-actions{ gap:.28rem; flex:none; }
  .header-actions .btn{ padding:.45rem .5rem; min-width:44px; min-height:44px; }
  /* v2.9 ① iOS Safari 포커스 자동 줌 차단: 입력 폰트 16px 미만이면 줌됨 */
  input[type="text"],input[type="tel"],input[type="email"],input[type="date"],
  input[type="search"],input[type="number"],select,textarea{ font-size:16px; }
  /* v2.9 ② 탭 지연 제거(최신 브라우저) */
  a,button,.btn,.tab-btn,.chip,.preset-btn{ touch-action:manipulation; }
}
/* 모션 최소화 사용자 배려 (접근성 표준) */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
/* 극소형 폭(320px급, iPhone 5 세대) 방어: 브랜드 축소 + 필요 시 2단 줄바꿈 */
@media (max-width:359px){
  .brand-text small{ display:none; }
  .brand-text{ font-size:.92rem; }
  .header-inner{ flex-wrap:wrap; row-gap:.15rem; }
}
@media (max-width:767px){
  .header-actions .bt-lbl{ display:none; } /* 라벨 없는 아이콘 버튼은 정사각 유지 */
  .header-actions .ic{ width:20px; height:20px; }
}

@media (min-width:768px){
  body{ font-size:16px; }
  main.main{ padding:1.3rem 1.2rem 3.2rem; }
  .tabbar{ position:sticky; top:64px; bottom:auto; z-index:30; max-width:980px; margin:0 auto 1.4rem; display:flex;
    border:1px solid var(--line); border-radius:99px; padding:5px; gap:4px; box-shadow:var(--sh-2);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .tab-btn{ flex-direction:row; gap:.38rem; border-radius:99px; min-height:46px; font-size:.8rem;
    white-space:nowrap; padding:0 .55rem; }
  .tab-btn .tab-ico{ font-size:1.05rem; }
  .tab-btn.active{ box-shadow:none; background:var(--grad-brand); color:#fff; }
  .tab-btn.active .tab-ico{ transform:none; }
  .crud-row{ grid-template-columns:110px 80px 1fr; }
  .crud-row.work{ grid-template-columns:110px 70px 110px 70px 1fr; }
  .dashboard .dash-grid{ grid-template-columns:132px 1fr; }
  .donut-wrap,.donut{ width:132px; height:132px; }
  .site-footer{ padding-bottom:2.4rem; }
}
@media (min-width:1024px){
  .workcols{ grid-template-columns:minmax(0,55fr) minmax(0,45fr); gap:1.5rem; }
  .pv-col{ position:sticky; top:136px; }
}

/* ===== 15. 인쇄 전용 ===== */
#printRoot{ display:none; }
@media print{
  @page{ size:A4; margin:0; }
  html,body{ background:#fff !important; }
  #appScreen,#toastRoot,dialog,.hero{ display:none !important; }
  #printRoot{ display:block !important; }
  #printRoot .a4{ box-shadow:none; transform:none !important; margin:0; }
  #printRoot .a4.tall{ height:auto; }
}