/* 입시로드 홈페이지 — 프로토타입(hero_mascot/redesign) 이식본.
   공식 브랜드 디자인 시스템(brand_identity_0621 / 메인시안 250622).
   라이브 CSP(style-src 'self') 준수: 인라인 style 0. 폰트는 design-tokens.css 가 자체호스팅 제공.
   2026-06-25 전면 교체(기존 B안 → 시안 이식).
   ============================================================ */

:root{
  /* 공식 5색 팔레트 */
  --green:#2B3F32;    /* Main · Deep Green — 로고·메인 버튼·핵심 강조 */
  --sage:#E2E9E2;     /* Sub  · Pale Sage  — 섹션 배경·보조 카드 */
  --mint:#E2E9E2;     /* alias */
  --beige:#C9C2AE;    /* Accent · Warm Beige — 구분선·배지·형광 강조 */
  --cream:#FAF9F7;    /* Background · Soft White — 전체 배경 */
  --brown:#6C5F50;    /* Text · Warm Brown — 본문·설명문 */
  /* 파생 */
  --green-2:#3D5647; --green-d:#21302A; --green-ink:#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;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--ff-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  word-break:keep-all;line-height:1.6}
.shell{max-width:1180px;margin:0 auto;padding:0 32px}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.product-site{display:block}

/* ===== header ===== */
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)}
.hd .nav{display:flex;align-items:center;gap:18px;height:70px}
.hd .logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--green)}
.hd .logo .logo-mark{width:30px;height:30px;flex:none;display:block}
.hd .logo .logo-word{font-family:var(--ff-head)}
.hd .logo .mk{width:28px;height:28px;border-radius:8px;background:var(--green);display:grid;place-items:center;color:#fff;font-size:15px;font-weight:900;font-family:var(--ff-head)}
.hd .links{display:flex;align-items:center;gap:26px;margin-left:14px}
.hd .links a{color:var(--brown);font-size:14.5px;font-weight:600}
.hd .links a:hover,.hd .links a.on{color:var(--green)}
.hd .sp{flex:1}
.header-actions{display:flex;align-items:center;gap:14px}
.header-auth-link{color:var(--brown);font-size:14.5px;font-weight:700}
.header-auth-link:hover{color:var(--green)}
.header-account{color:var(--brown);font-size:13.5px;font-weight:700}
.header-cta{background:var(--green);color:#fff;padding:10px 18px;border-radius:10px;font-size:14.5px;font-weight:700;white-space:nowrap}
.header-cta:hover{background:var(--green-d)}

/* ===== nav 드롭다운 (도구·로디) ===== */
.hd .nav-dd{position:relative;display:inline-flex}
.hd .nav-dd-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:0;cursor:pointer;font-family:inherit;color:var(--brown);font-size:14.5px;font-weight:600;padding:0;line-height:1.5}
.hd .nav-dd-btn:hover,.hd .nav-dd.open .nav-dd-btn{color:var(--green)}
.hd .nav-dd-caret{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.hd .nav-dd.open .nav-dd-caret{transform:rotate(180deg)}
.hd .nav-dd-menu{display:none;position:absolute;top:calc(100% - 12px);left:50%;transform:translateX(-50%);min-width:170px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;flex-direction:column;gap:2px;box-shadow:0 16px 34px rgba(15,40,28,.14);z-index:40}
.hd .nav-dd.open .nav-dd-menu{display:flex}
.hd .nav-dd-menu a{color:var(--brown);font-size:14px;font-weight:600;padding:9px 12px;border-radius:8px;white-space:nowrap}
.hd .nav-dd-menu a:hover{background:#EEF3EC;color:var(--green)}

/* ===== typography ===== */
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--brown)}
h1{font-family:var(--ff-head);font-size:clamp(38px,5vw,58px);line-height:1.18;letter-spacing:-.02em;font-weight:700;color:var(--green);margin:18px 0 0}
h2{font-family:var(--ff-head);font-size:clamp(26px,3.2vw,38px);line-height:1.22;letter-spacing:-.02em;font-weight:700;color:var(--green);margin:10px 0 0}
.hl,.u{background:linear-gradient(transparent 58%,var(--beige) 58%);padding:0 .04em;border-radius:2px}
.lead{color:var(--soft);font-size:18px;line-height:1.66;max-width:40ch;margin:18px 0 0;font-weight:500}
.sub{color:var(--soft);font-size:16px;margin:12px 0 0;max-width:62ch}

/* ===== buttons ===== */
.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)}
.btn.p{background:var(--green);color:#fff;box-shadow:0 12px 26px rgba(43,63,50,.22)}
.btn.p:hover{transform:translateY(-2px)}
.btn.s{background:#fff;color:var(--green);border:1px solid var(--line)}
.btn.s:hover{border-color:var(--green)}

/* ===== sections + cards ===== */
section.band{padding:80px 0}
.band.sage{background:var(--sage)}
.band.cream2{background:var(--cream-2)}
.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}
.badge svg{width:15px;height:15px;stroke:var(--green);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ===== 히어로 ===== */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:linear-gradient(158deg,#E6EFE7 0%,#EFF1E9 50%,var(--cream) 100%)}
.hero::before{content:"";position:absolute;top:-180px;left:-160px;width:600px;height:600px;
  background:radial-gradient(circle at center,rgba(214,229,216,.65) 0%,rgba(214,229,216,0) 70%);pointer-events:none}
.hero .shell{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center;padding:64px 32px 76px}
.hero .badge{background:var(--beige);color:var(--green)}
.hero .badge svg{stroke:var(--green)}
.hero h1{margin-top:20px;line-height:1.16}
.hero .lead{max-width:40ch}
.dot-period{color:var(--green)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.trust .ti{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--green);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 15px}
.trust .ti svg{width:16px;height:16px;stroke:var(--green);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* 우측 — 결과물 예시화면 */
.stage{position:relative;border-radius:22px;background:#FCFBF7;border:1px solid var(--line);
  padding:22px;min-height:440px;box-shadow:0 24px 54px rgba(43,63,50,.10);overflow:hidden}
.stage .win-top{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.stage .win-top .pill{display:inline-flex;align-items:center;gap:6px;background:var(--green);color:#fff;
  font-size:12px;font-weight:800;padding:7px 13px;border-radius:999px}
.stage .win-top .pill svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.stage .win-top .when{margin-left:auto;font-size:11.5px;color:var(--faint);font-weight:600}
.stage .res-sum{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:16px 0 2px}
.stage .res-sum .lab{font-size:12px;font-weight:800;color:var(--brown);margin-right:4px}
.stage .res-sum .v{font-size:12px;font-weight:700;color:var(--green);background:var(--sage);border-radius:999px;padding:5px 11px}
.rc{background:#fff;border:1px solid var(--line);border-radius:13px;padding:15px 16px;margin-top:12px;box-shadow:0 8px 20px rgba(43,63,50,.05)}
.rc .rc-n{font-size:11px;font-weight:800;color:var(--brown)}
.rc h5{margin:5px 0 0;font-size:14px;line-height:1.45;color:var(--green);font-weight:800}
.rc .rc-src{display:flex;gap:6px;margin-top:10px}
.rc .rc-src i{font-style:normal;font-size:10.5px;font-weight:700;color:var(--green);background:var(--sage);border-radius:6px;padding:3px 8px}

/* ===== 섹션 공통 헤더 ===== */
.sec-head{text-align:left;max-width:760px}
.sec-head .sub{margin-top:14px;font-size:16.5px}

/* ===== 수행·자기평가 관리 카드 ===== */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));gap:16px;margin-top:38px}
.tool{position:relative;display:flex;flex-direction:column;border-radius:18px;padding:24px;min-height:238px;border:1px solid var(--line);
  transition:transform .2s,box-shadow .2s}
.tool:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(43,63,50,.14)}
.tool .otag{position:absolute;top:13px;right:13px;font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:999px}
.tool.deep .otag,.tool.brown .otag{background:rgba(255,255,255,.18);color:#fff}
.tool.light .otag{background:var(--sage);color:var(--green)}
.tool.soon .otag{background:#f2d06b;color:#5a4300}
.tool h3{font-size:18px;font-weight:800;letter-spacing:-.01em;margin:16px 0 0}
.tool p{font-size:14.5px;line-height:1.62;margin:9px 0 0;flex:1}
.tool .go{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:14px;margin-top:16px}
.tool .go svg{width:16px;height:16px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tool .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--sage);margin-bottom:2px}
.tool .ic svg{width:24px;height:24px;stroke:var(--green);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tool.deep{background:var(--green);border-color:var(--green)}
.tool.deep h3,.tool.deep .go{color:#fff}
.tool.deep p{color:rgba(255,255,255,.82)}
.tool.deep .ic{background:rgba(255,255,255,.12)} .tool.deep .ic svg,.tool.deep .go svg{stroke:#fff}
.tool.light{background:#fff} .tool.light h3{color:var(--green)} .tool.light p{color:var(--soft)}
.tool.light .go{color:var(--green)} .tool.light .go svg{stroke:var(--green)}
.tool.brown{background:var(--brown);border-color:var(--brown)}
.tool.brown h3,.tool.brown .go{color:#fff} .tool.brown p{color:rgba(255,255,255,.85)}
.tool.brown .ic{background:rgba(255,255,255,.14)} .tool.brown .ic svg,.tool.brown .go svg{stroke:#fff}

/* ===== 나의 입시로그 후기 ===== */
.log-sec{text-align:center}
/* 섹션 머리는 왼쪽 정렬(도구 섹션과 통일 — 2026-07 디자인 피드백: 제목·본문 정렬 불일치 해소) */
.log-sec .sec-head{text-align:left}
.log-sec .sec-head h2{margin:0}
.log-sec .sec-head .sub{margin:16px 0 0;max-width:60ch}
.log-sec h2{margin:0 auto}
.log-sec .sub{margin:16px auto 0;max-width:60ch}
.log-sec .rev-disclaimer{margin:18px auto 0;font-size:13px;color:var(--faint)}
.rev-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px;text-align:left}
.rev-cta{margin-top:30px;text-align:center}
.rev-cta-btn{display:inline-block;background:var(--green,#2B3F32);color:#fff;text-decoration:none;font-weight:800;font-size:15px;border-radius:999px;padding:13px 26px;box-shadow:0 10px 24px rgba(43,63,50,.16)}
.rev-cta-btn:hover{background:#21302A}
.rev{background:var(--green);color:#fff;border-radius:16px;padding:24px;box-shadow:0 16px 34px rgba(43,63,50,.16)}
.rev:nth-child(2){transform:translateY(18px)} .rev:nth-child(3){transform:translateY(-8px)}
.rev .who{display:flex;align-items:center;gap:10px}
.rev .av{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center}
.rev .av svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rev .nm{font-size:14px;font-weight:800}
.rev .stars{display:flex;gap:2px;margin:12px 0 10px}
.rev .stars svg{width:15px;height:15px;fill:var(--gold);stroke:none}
.rev p{margin:0;font-size:14px;line-height:1.66;color:rgba(255,255,255,.9)}

/* ===== 푸터 (_site_footer.html — .site-footer) ===== */
.live-product-site .site-footer{display:block;background:var(--foot-bg);border-top:1px solid var(--line);padding:46px 68px 30px;font-size:13px;color:var(--soft)}
.live-product-site .footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 40px}
.live-product-site .footer-column{display:grid;gap:6px;align-content:start}
.live-product-site .footer-column strong{font-size:13.5px;color:var(--ink)}
.live-product-site .footer-column a{color:var(--soft)}
.live-product-site .footer-column a:hover{color:var(--green)}
.live-product-site .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}
.live-product-site .footer-business-inline{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--soft);align-items:center}
.live-product-site .footer-business-inline strong{color:var(--ink)}
.live-product-site .footer-business-actions{display:flex;gap:14px}
.live-product-site .footer-business-actions a{color:var(--green);font-weight:700}
.live-product-site .footer-business-details{margin:14px 0}
.live-product-site .footer-business-details summary{cursor:pointer;color:var(--soft);font-weight:700;font-size:12.5px}
.live-product-site .footer-business-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 22px;margin-top:12px}
.live-product-site .footer-business-meta div{display:grid;gap:2px}
.live-product-site .footer-business-meta span{color:var(--soft);font-size:11.5px}
.live-product-site .footer-business-meta strong{font-size:12.5px;color:var(--ink)}
.live-product-site .footer-utility-links{display:flex;flex-wrap:wrap;gap:16px;padding:16px 0}
.live-product-site .footer-utility-links a{color:var(--soft);font-weight:600}
.live-product-site .footer-utility-links a:hover{color:var(--green)}
.live-product-site .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:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}

/* ===== 반응형 ===== */
@media(max-width:920px){
  .hd .links{display:none}
  .hero .shell{grid-template-columns:1fr;gap:34px;padding:52px 32px 60px}
  .stage{min-height:auto}
  .rev-wrap{grid-template-columns:1fr}
  .rev:nth-child(2),.rev:nth-child(3){transform:none}
}
@media(max-width:760px){
  .shell{padding:0 22px}
  .hd .nav{gap:10px}
  .header-actions{gap:8px}
  .header-auth-link,.header-account{display:none}
  .header-cta{padding:9px 12px;max-width:112px;overflow:hidden;text-overflow:ellipsis}
  .hero .shell{gap:24px;padding:42px 22px 46px}
  .hero .lead{font-size:16px;line-height:1.55}
  .hero-cta{margin-top:24px}
  .trust,.stage .when{display:none}
  .stage{min-height:0;padding:16px;border-radius:16px}
  section.band{padding:52px 0}
  .sec-head .sub{font-size:15px;line-height:1.55}
  .tool-grid{grid-template-columns:1fr;gap:10px;margin-top:24px}
  .tool{min-height:0;padding:16px;border-radius:14px}
  .tool:hover{transform:none}
  .tool .otag{display:none}
  .tool .ic{width:38px;height:38px;border-radius:10px}
  .tool .ic svg{width:20px;height:20px}
  .tool h3{font-size:17px;margin:9px 0 0}
  .tool p{font-size:13.5px;line-height:1.45;margin:4px 0 0}
  .tool .go{font-size:13px;margin-top:10px}
  .live-product-site .site-footer{padding:34px 22px}
  .live-product-site .footer-grid,.live-product-site .footer-business-meta{grid-template-columns:1fr}
  .live-product-site .footer-business-strip{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important}.rv{opacity:1;transform:none}}

/* ===== 모바일 햄버거 + 드로어 (2026-06-26 UX) ===== */
.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}
.hd.nav-open .hd-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hd.nav-open .hd-burger span:nth-child(2){opacity:0}
.hd.nav-open .hd-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:920px){
  .hd-burger{display:inline-flex}
  .hd.nav-open .links{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(15,40,28,.12);z-index:35}
  .hd.nav-open .links a{font-size:16px;font-weight:700;color:var(--ink);padding:8px 0}
  .hd .nav-dd{display:block}
  .hd .nav-dd-btn{width:100%;justify-content:space-between;line-height:1.5;font-size:16px;font-weight:700;color:var(--ink);padding:8px 0}
  .hd .nav-dd-caret{width:16px;height:16px}
  .hd .nav-dd-menu{position:static;transform:none;display:none;min-width:0;border:0;border-radius:0;box-shadow:none;padding:0 0 6px 12px;background:none}
  .hd .nav-dd.open .nav-dd-menu{display:flex}
  .hd .nav-dd-menu a{font-size:15px;font-weight:600;color:var(--brown);padding:7px 0}
  .hd .nav-dd-menu a:hover{background:none}
}