/* 입시로드 — 전 페이지 공유 디자인 시스템 (프로토타입 hero_mascot/redesign/app.css 이식).
   모든 방문자 페이지가 design-tokens 또는 styles 뒤에 이 파일을 로드 → 헤더·타이포·버튼·카드 통일.
   라이브 CSP(style-src 'self') 준수, 폰트 자체호스팅(/static/fonts). 2026-06-26.
   ============================================================ */

/* ---------- 폰트 (자체호스팅) ---------- */
@font-face{font-family:"MaruBuri";font-weight:400;font-style:normal;font-display:swap;
  src:url("/static/fonts/MaruBuri-Regular.woff2") format("woff2")}
@font-face{font-family:"MaruBuri";font-weight:600;font-style:normal;font-display:swap;
  src:url("/static/fonts/MaruBuri-SemiBold.woff2") format("woff2")}
@font-face{font-family:"MaruBuri";font-weight:700;font-style:normal;font-display:swap;
  src:url("/static/fonts/MaruBuri-Bold.woff2") format("woff2")}

/* ---------- 토큰 (프로토타입 공식 5색) ---------- */
:root{
  --green:#2B3F32; --sage:#E2E9E2; --mint:#E2E9E2; --beige:#C9C2AE; --cream:#FAF9F7; --brown:#6C5F50;
  --green-2:#3D5647; --green-d:#21302A; --logo:#2B3F32; --cream-2:#F2EEE6; --gold:#C39A3D;
  --ink:#26241F; --soft:#6C5F50; --faint:#9C9486; --line:#E8E2D6; --card:#FFFFFF; --foot-bg:#E2E9E2;
  --ff-body:"Pretendard Variable",Pretendard,system-ui,sans-serif;
  --ff-head:"Pretendard Variable",Pretendard,sans-serif;
}

/* ---------- 헤더 (.hd — _site_header.html 마크업) ---------- */
header.hd{position:sticky;top:0;z-index:30;background:rgba(250,249,247,.82);backdrop-filter:saturate(1.3) blur(12px);-webkit-backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid var(--line)}
header.hd .shell{max-width:1180px;margin:0 auto;padding:0 32px;display:flex;align-items:center;gap:18px;height:70px}
header.hd .logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--green)}
header.hd .logo .logo-mark{width:30px;height:30px;flex:none;display:block}
header.hd .logo .logo-word{font-family:var(--ff-head)}
header.hd .nav{display:flex;gap:26px;margin-left:14px}
header.hd .nav a{color:var(--brown);font-size:14.5px;font-weight:600}
header.hd .nav a:hover,header.hd .nav a.on{color:var(--green)}
header.hd .header-actions{display:flex;align-items:center;gap:14px;margin-left:auto}
header.hd .header-auth-link{color:var(--brown);font-size:14.5px;font-weight:700}
header.hd .header-auth-link:hover{color:var(--green)}
header.hd .header-account{color:var(--brown);font-size:13.5px;font-weight:700}
header.hd .header-cta{background:var(--green);color:#fff;padding:10px 18px;border-radius:10px;font-size:14.5px;font-weight:700;white-space:nowrap}
header.hd .header-cta:hover{background:var(--green-d)}
header.hd .mobile-nav-auth{display:none}

/* ---------- 본문 셸 ---------- */
.ir-shell,.shell{max-width:1180px;margin:0 auto;padding:0 32px}
.ir-page{background:var(--cream);color:var(--ink);font-family:var(--ff-body);line-height:1.6;word-break:keep-all}

/* ---------- 타이포 ---------- */
.ir h1,.ir-h1{font-family:var(--ff-head);font-size:clamp(34px,4.4vw,52px);line-height:1.18;letter-spacing:-.02em;font-weight:700;color:var(--green);margin:14px 0 0}
.ir h2,.ir-h2{font-family:var(--ff-head);font-size:clamp(24px,3vw,34px);line-height:1.22;letter-spacing:-.02em;font-weight:700;color:var(--green);margin:8px 0 0}
.ir .eyebrow,.ir-eyebrow{font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--brown)}
.ir .lead,.ir-lead{color:var(--soft);font-size:18px;line-height:1.66;margin:16px 0 0}
.ir .sub,.ir-sub{color:var(--soft);font-size:16px;margin:12px 0 0;max-width:62ch}
.hl,.u{background:linear-gradient(transparent 58%,var(--beige) 58%);padding:0 .04em;border-radius:2px}
.dot-period{color:var(--green)}

/* ---------- 버튼 ---------- */
.ir-btn,.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15.5px;padding:14px 26px;border-radius:12px;cursor:pointer;border:0;transition:transform .18s,box-shadow .18s;font-family:var(--ff-body);text-decoration:none}
.ir-btn.p,.btn.p{background:var(--green);color:#fff;box-shadow:0 12px 26px rgba(43,63,50,.22)}
.ir-btn.p:hover,.btn.p:hover{transform:translateY(-2px)}
.ir-btn.s,.btn.s{background:#fff;color:var(--green);border:1px solid var(--line)}
.ir-btn.s:hover,.btn.s:hover{border-color:var(--green)}

/* ---------- 섹션·카드·배지 ---------- */
.ir-band,section.band{padding:72px 0}
.ir-band.sage,.band.sage{background:var(--sage)}
.ir-band.cream2,.band.cream2{background:var(--cream-2)}
.ir-card,.ir .card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 12px 28px rgba(43,63,50,.06)}
.ir-badge,.ir .badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--green);background:var(--sage);border:0;padding:9px 16px;border-radius:999px}
.ir-badge svg,.ir .badge svg{width:15px;height:15px;stroke:var(--green);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* 페이지 상단 히어로(도구/일반 페이지 공통) */
.ir-tophero{padding:54px 0 8px}
.ir-tophero .ir-lead,.ir-tophero .lead{max-width:60ch}

/* ---------- 폼 필드(도구 페이지) ---------- */
.ir-field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px}
.ir-field-row.three{grid-template-columns:repeat(3,1fr)}
.ir-field{display:flex;flex-direction:column;margin-bottom:2px}
.ir-field label{font-size:14px;font-weight:800;color:var(--green);margin-bottom:7px}
.ir-field input,.ir-field select,.ir-field textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:#fff;padding:12px 14px;font-size:15px;color:var(--ink);font-family:inherit}
.ir-field textarea{min-height:90px;resize:vertical}
.ir-field input:focus,.ir-field select:focus,.ir-field textarea:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(43,63,50,.1)}
.ir-field .hint{font-size:12.5px;color:var(--faint);margin-top:6px;line-height:1.5}

/* 파일 업로드 드롭존 */
.ir-drop,.drop{display:block;border:2px dashed var(--beige);border-radius:14px;background:var(--mint);padding:30px 22px;text-align:center;cursor:pointer;transition:border-color .18s,background .18s}
.ir-drop:hover,.drop:hover{border-color:var(--green);background:#DCEAE0}
/* 드롭존 아이콘·문구 (SVG 크기·fill 제어 — 미지정 시 거대 검정 아이콘 사고) */
.drop .ic{width:48px;height:48px;border-radius:12px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;margin:0 auto 12px}
.drop .ic svg{width:24px;height:24px;stroke:var(--green);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.drop .dz-t{font-size:15px;font-weight:800;color:var(--green)}
.drop .dz-s{font-size:12.5px;color:var(--soft);margin-top:5px}
.drop .dz-f{display:inline-flex;align-items:center;gap:7px;margin-top:13px;font-size:12px;font-weight:700;color:var(--green);background:#fff;border:1px solid var(--line);padding:7px 13px;border-radius:999px}
.drop .dz-f svg{width:13px;height:13px;stroke:var(--green);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* line-svg 아이콘 칩 */
.ir-ic,.ir .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--sage)}
.ir-ic svg,.ir .ic svg{width:24px;height:24px;stroke:var(--green);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 푸터 (_site_footer.html — .site-footer) ---------- */
.site-footer{display:block;background:var(--foot-bg);border-top:1px solid var(--line);padding:46px 68px 30px;font-size:13px;color:var(--soft)}
.site-footer .footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 40px}
.site-footer .footer-column{display:grid;gap:6px;align-content:start}
.site-footer .footer-column strong{font-size:13.5px;color:var(--ink)}
.site-footer .footer-column a{color:var(--soft)}
.site-footer .footer-column a:hover{color:var(--green)}
.site-footer .footer-business-strip{display:grid;grid-template-columns:1fr auto;gap:14px 28px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:26px;align-items:center}
.site-footer .footer-business-inline{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--soft);align-items:center}
.site-footer .footer-business-inline strong{color:var(--ink)}
.site-footer .footer-business-actions{display:flex;gap:14px}
.site-footer .footer-business-actions a{color:var(--green);font-weight:700}
.site-footer .footer-business-details{margin:14px 0}
.site-footer .footer-business-details summary{cursor:pointer;color:var(--soft);font-weight:700;font-size:12.5px}
.site-footer .footer-business-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 22px;margin-top:12px}
.site-footer .footer-business-meta div{display:grid;gap:2px}
.site-footer .footer-business-meta span{color:var(--soft);font-size:11.5px}
.site-footer .footer-business-meta strong{font-size:12.5px;color:var(--ink)}
.site-footer .footer-utility-links{display:flex;flex-wrap:wrap;gap:16px;padding:16px 0}
.site-footer .footer-utility-links a{color:var(--soft);font-weight:600}
.site-footer .footer-utility-links a:hover{color:var(--green)}
.site-footer .footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;color:var(--soft);padding-top:14px;border-top:1px solid var(--line)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(16px);animation:ir-rise .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes ir-rise{to{opacity:1;transform:none}}

@media(max-width:920px){header.hd .nav{display:none} .ir-field-row,.ir-field-row.three{grid-template-columns:1fr}}
@media(max-width:760px){
  header.hd .shell,.shell{padding:0 22px}
  header.hd .shell{gap:10px}
  header.hd .header-actions{gap:8px}
  header.hd .header-auth-link,header.hd .header-account{display:none}
  header.hd .header-cta{padding:9px 12px;max-width:112px;overflow:hidden;text-overflow:ellipsis}
  .site-footer{padding:34px 22px}
  .site-footer .footer-grid,.site-footer .footer-business-meta{grid-template-columns:1fr}
  .site-footer .footer-business-strip{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important}.rv{opacity:1;transform:none}}

/* ===== 모바일 햄버거 + 드로어 (2026-06-26 UX: 모바일 nav 사라짐 보완) ===== */
.hd-burger{display:none;flex-direction:column;justify-content:center;gap:4px;width:40px;height:40px;background:none;border:0;cursor:pointer;padding:9px}
.hd-burger span{display:block;width:22px;height:2px;background:var(--green);border-radius:2px;transition:transform .2s,opacity .2s}
header.hd.nav-open .hd-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
header.hd.nav-open .hd-burger span:nth-child(2){opacity:0}
header.hd.nav-open .hd-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:920px){
  .hd-burger{display:inline-flex}
  header.hd.nav-open .nav{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:14px 22px;gap:6px;box-shadow:0 16px 30px rgba(43,63,50,.12);z-index:35}
  header.hd.nav-open .nav a{font-size:16px;font-weight:700;color:var(--brown);padding:8px 0}
  header.hd.nav-open .nav a:hover{color:var(--green)}
  header.hd.nav-open .mobile-nav-auth{display:flex;flex-direction:column;gap:8px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
  header.hd.nav-open .mobile-nav-auth a,
  header.hd.nav-open .mobile-nav-auth span{font-size:15px;font-weight:800;padding:9px 0;color:var(--brown)}
  header.hd.nav-open .mobile-nav-auth .mobile-auth-cta{display:none}
  header.hd.nav-open .mobile-nav-auth .mobile-auth-account{color:var(--faint);font-size:13px;padding-bottom:2px}
  header.hd.nav-open .mobile-nav-auth .mobile-auth-link{display:block}
}

/* ===== 진행바 공통 (주제추천·과제검토·자기평가서 동일) — 실행 중 일렁이는 애니메이션 + 경과시간만 ===== */
.progress-card.is-running .progress-track{position:relative;overflow:hidden}
.progress-card.is-running .progress-track span{position:relative;overflow:hidden;min-width:6%}
.progress-card.is-running .progress-track span::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:ir-progress-sheen 1.15s linear infinite}
@keyframes ir-progress-sheen{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.progress-card.is-done .progress-track span{background:var(--green)}
.progress-card p{text-align:right;font-variant-numeric:tabular-nums;color:var(--faint)}
@media(prefers-reduced-motion:reduce){.progress-card.is-running .progress-track span::after{animation:none}}

/* ===== 진행 단계 표시 공통 (주제추천·과제검토·자기평가서 동일) ===== */
.steps{display:flex;align-items:center;gap:10px;margin:24px auto 0;max-width:1180px;flex-wrap:wrap}
.steps .s{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--faint)}
.steps .s.active{color:var(--green)}
.steps .s .n{width:22px;height:22px;border-radius:50%;background:var(--sage);color:var(--green);display:grid;place-items:center;font-size:12px;font-weight:800}
.steps .s.active .n{background:var(--green);color:#fff}
.steps .sep{color:var(--faint)}