@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');

:root{
  --sg-navy:#153b67;
  --sg-navy-2:#0d2b4c;
  --sg-teal:#0b8185;
  --sg-teal-2:#096b70;
  --sg-green:#4f7f2f;
  --sg-yellow:#f5c842;
  --sg-yellow-soft:#fff8dc;
  --sg-ink:#1d2b3b;
  --sg-muted:#647385;
  --sg-line:#dbe3e8;
  --sg-paper:#f6f8f6;
  --sg-soft:#eef5f4;
  --sg-white:#fff;
  --sg-danger:#b5463c;
  --sg-font:"SeoulNamsan","서울남산체","Seoul Namsan","NanumBarunGothic","나눔바른고딕","KT&G 상상체","KT&G Sangsang","HCR Dotum","함초롬돋움","Nanum Gothic","Malgun Gothic",sans-serif;
  --primary:var(--sg-teal);
  --primary-dark:var(--sg-teal-2);
  --secondary:var(--sg-navy);
  --accent:var(--sg-yellow);
  --bg:var(--sg-white);
  --text:var(--sg-ink);
  --border:var(--sg-line);
  --radius:14px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body,button,input,select,textarea{
  font-family:var(--sg-font)!important;
  letter-spacing:-.012em;
}
body{
  background:var(--sg-paper)!important;
  color:var(--sg-ink)!important;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
  overflow-wrap:break-word;
  line-break:strict;
  user-select:text!important;
}
body::before{
  background:
    linear-gradient(90deg,rgba(21,59,103,.018) 1px,transparent 1px),
    linear-gradient(rgba(21,59,103,.018) 1px,transparent 1px)!important;
  background-size:42px 42px!important;
}
input,textarea,select,[contenteditable="true"]{user-select:text!important;}

h1,h2,h3,h4,h5,h6,
.site-brand,.logo,.study-title,.exam-title{
  font-family:var(--sg-font)!important;
  letter-spacing:-.038em;
  word-break:keep-all;
  overflow-wrap:normal;
  text-wrap:balance;
}
p,li,td,th,label,summary,.study-sub,.iv-lead{
  word-break:keep-all;
  overflow-wrap:break-word;
  line-break:strict;
  text-wrap:pretty;
}
a{text-underline-offset:3px;}
.container{max-width:1240px!important;padding-left:22px!important;padding-right:22px!important;}

/* ===== 통합 헤더 ===== */
.site-nav,.topbar{
  position:sticky!important;
  top:0;
  z-index:300!important;
  background:rgba(255,255,255,.97)!important;
  color:var(--sg-ink)!important;
  border-bottom:1px solid var(--sg-line)!important;
  box-shadow:0 5px 22px rgba(13,43,76,.055)!important;
  backdrop-filter:blur(14px);
  padding:0!important;
}
.site-nav .nav-inner,
.topbar .container{
  max-width:1240px!important;
  min-height:70px;
  margin:0 auto!important;
  padding:9px 22px!important;
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
}
.site-brand,.topbar .logo{
  display:inline-flex!important;
  align-items:center!important;
  gap:9px!important;
  color:var(--sg-navy)!important;
  font-size:1.08rem!important;
  font-weight:800!important;
  text-decoration:none!important;
  white-space:nowrap;
}
.site-brand::before,.topbar .logo::before{
  content:"";
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:12px;
  background:#fff url("../assets/jaeili-avatar.png") center/cover no-repeat;
  border:1px solid #eadc9a;
  box-shadow:0 3px 10px rgba(121,92,13,.10);
}
.site-nav nav{
  display:flex!important;
  gap:3px!important;
  margin-left:auto!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
}
.site-nav nav a{
  color:#566577!important;
  text-decoration:none!important;
  border-radius:999px!important;
  padding:8px 11px!important;
  font-size:.84rem!important;
  font-weight:700!important;
}
.site-nav nav a:hover,.site-nav nav a[aria-current="page"]{
  background:#eef4f4!important;
  color:var(--sg-navy)!important;
}
.topbar-actions{display:flex!important;align-items:center!important;gap:7px!important;margin-left:auto!important;}
.site-nav .btn-sm,.topbar .btn-sm{
  background:#fff!important;
  color:var(--sg-navy)!important;
  border:1px solid #ccd8df!important;
  border-radius:11px!important;
  padding:7px 11px!important;
  box-shadow:none!important;
}
.site-nav .btn-sm:hover,.topbar .btn-sm:hover{background:#f4f8f8!important;border-color:#9eb2bd!important;}

/* audience switch */
.audience-switch{
  display:inline-flex;align-items:center;padding:4px;border:1px solid #d4dde3;
  border-radius:999px;background:#f1f5f5;gap:3px;white-space:nowrap;
}
.audience-switch button,.audience-switch a{
  border:0;background:transparent;color:#657486;padding:8px 15px;border-radius:999px;
  font:700 .86rem/1 var(--sg-font);cursor:pointer;text-decoration:none;
}
.audience-switch button[aria-selected="true"],.audience-switch a.active{
  background:var(--sg-navy);color:#fff;box-shadow:0 4px 12px rgba(21,59,103,.15);
}
.audience-panel[hidden]{display:none!important;}

/* ===== 메인 히어로 ===== */
.home-hero{
  position:relative;overflow:hidden;display:grid!important;
  grid-template-columns:minmax(0,1.2fr) minmax(320px,.72fr)!important;
  gap:38px!important;align-items:center!important;margin:30px 0 22px!important;
  padding:46px 48px!important;border:1px solid #d8e1e6!important;border-radius:26px!important;
  background:
    radial-gradient(circle at 93% 10%,rgba(245,200,66,.18),transparent 28%),
    linear-gradient(145deg,#fff 0%,#fff 65%,#f7fbf9 100%)!important;
  box-shadow:0 16px 44px rgba(21,59,103,.07)!important;
}
.home-hero::before{
  content:"";position:absolute;left:0;top:0;width:8px;height:100%;
  background:linear-gradient(180deg,var(--sg-yellow),#83a34b 55%,var(--sg-teal));
}
.home-hero::after{
  content:"";position:absolute;width:250px;height:250px;right:-100px;top:-120px;
  border:32px solid rgba(11,129,133,.05);border-radius:50%;
}
.home-kicker{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;color:var(--sg-teal);font-size:.8rem;font-weight:800;letter-spacing:.04em;}
.home-kicker::before{content:"";width:30px;height:2px;background:var(--sg-teal);}
.home-hero h1{
  max-width:760px;margin:0 0 20px;color:var(--sg-navy-2);
  font-size:clamp(2.05rem,3.75vw,3.15rem)!important;line-height:1.17!important;font-weight:800!important;
}
.home-hero h1 em{font-style:normal;color:var(--sg-teal);}
.home-hero p{max-width:740px;margin:0;color:#5e6d7d;font-size:1rem;line-height:1.95;}
.hero-visual{
  position:relative;min-height:390px!important;display:flex!important;align-items:center!important;justify-content:center!important;
  border-radius:24px;background:linear-gradient(160deg,#fff8dc,#f7f5ea 60%,#fff);border:1px solid #eadfae;
  overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
}
.hero-visual::after{content:"안전은 제일 먼저";position:absolute;right:16px;top:16px;background:#fff;color:var(--sg-green);border:1px solid #e4d48b;border-radius:999px;padding:8px 12px;font-size:.75rem;font-weight:800;z-index:2;box-shadow:0 4px 12px rgba(87,72,27,.08);}
.hero-visual img{position:relative;z-index:1;display:block;width:auto!important;max-width:92%!important;height:380px!important;object-fit:contain!important;filter:none!important;}
.hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px;}
.hero-badges span{padding:7px 11px;border:1px solid #d5dfe4;background:#f7f9f8;color:#536476;border-radius:999px;font-size:.77rem;font-weight:700;}

/* ===== 공통 섹션 ===== */
.section-head{display:flex;justify-content:space-between;align-items:end;gap:18px;margin:36px 0 16px;}
.section-head .eyebrow,.eyebrow{display:block;margin-bottom:6px;color:var(--sg-teal);font-size:.76rem;font-weight:800;letter-spacing:.03em;}
.section-head h2{margin:0;color:var(--sg-navy-2);font-size:1.55rem;line-height:1.38;}
.section-head p{max-width:610px;margin:0;color:#687789;font-size:.88rem;line-height:1.75;}
.sg-panel,.content-section,.study-sec,.page-interview .iv-sec{
  background:#fff!important;border:1px solid var(--sg-line)!important;border-radius:18px!important;
  box-shadow:0 5px 18px rgba(21,59,103,.035)!important;
}
.sg-panel{margin:18px 0;padding:27px;}
.sg-panel h2,.sg-panel h3,.content-section h2,.content-section h3,.study-sec h3,.page-interview .iv-sec>h3{color:var(--sg-navy-2)!important;}
.sg-panel p,.sg-panel li,.content-section p,.content-section li,.study-sec p,.study-sec li,.page-interview .iv-sec p,.page-interview .iv-sec li{
  color:#5f6f80;line-height:1.88;
}
.sg-note,.note-box{
  padding:14px 16px!important;background:#f1f7f6!important;border-left:4px solid var(--sg-teal)!important;
  border-radius:0 11px 11px 0!important;color:#536474!important;font-size:.88rem!important;line-height:1.8!important;
}

/* career cards */
.career-roadmap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:26px;}
.career-card{position:relative;display:block;min-height:178px;padding:21px 20px 19px;border:1px solid #dbe3e8;border-radius:17px;background:#fff;color:inherit;text-decoration:none;transition:.18s ease;}
.career-card:hover{transform:translateY(-3px);border-color:#9ab6bd;box-shadow:0 10px 24px rgba(21,59,103,.08);}
.career-step{display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin-bottom:17px;border-radius:10px;background:var(--sg-navy);color:#fff;font-size:.8rem;font-weight:800;}
.career-card:nth-child(2) .career-step{background:#2b7280}.career-card:nth-child(3) .career-step{background:#7a6940}.career-card:nth-child(4) .career-step{background:#8a5c4d}
.career-card h3{margin:0 0 8px;color:#173b60;font-size:1.03rem;}
.career-card p{margin:0;color:#69798a;font-size:.84rem;line-height:1.72;}
.career-card .go{position:absolute;right:17px;top:18px;color:#98a7b4;}

/* stats */
.stats-row{gap:12px!important;margin-bottom:24px!important;}
.stat-card{border:1px solid var(--sg-line)!important;border-radius:16px!important;box-shadow:none!important;padding:18px!important;}
.stat-card .label{color:#6c7988!important;}.stat-card .value{color:var(--sg-teal)!important;}

/* English */
.part-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:14px;}
.part-link{display:flex;flex-direction:column;gap:4px;padding:15px;border:1px solid #dbe3e8;border-radius:14px;background:#fff;color:#566678;text-decoration:none;transition:.18s ease;}
.part-link b{color:var(--sg-navy);font-size:.88rem;}.part-link span{font-size:.8rem;}.part-link:hover{border-color:#9db6bd;transform:translateY(-2px);}

/* worker home cards */
.worker-intro{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.7fr);gap:14px;align-items:stretch;}
.worker-principles{padding:25px;border-radius:18px;background:var(--sg-navy);color:#fff;box-shadow:0 9px 28px rgba(21,59,103,.13);}
.worker-principles h3{margin:0 0 12px;color:#fff;}.worker-principles ol{margin:0;padding-left:19px;}.worker-principles li{margin:8px 0;line-height:1.65;color:#e7eef4;font-size:.84rem;}
.worker-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px;}
.flow-item{padding:13px;border:1px solid #dbe3e8;border-radius:12px;background:#f8faf9;}.flow-item b{display:block;color:var(--sg-navy);font-size:.82rem;margin-bottom:4px;}.flow-item span{color:#69798a;font-size:.75rem;line-height:1.55;}
.worker-tools-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.tool-card{display:block;min-height:188px;padding:20px;border:1px solid #dbe3e8;border-radius:17px;background:#fff;text-decoration:none;color:inherit;transition:.18s ease;}
.tool-card:hover{transform:translateY(-3px);border-color:#9ab5bc;box-shadow:0 9px 24px rgba(21,59,103,.08);}.tool-card h3{margin:13px 0 7px;color:var(--sg-navy);font-size:1rem;}.tool-card p{margin:0;color:#6a7988;font-size:.82rem;line-height:1.68;}
.tool-icon{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:38px;padding:0 9px;border-radius:11px;background:#eef5f4;color:var(--sg-teal);font-size:.72rem;font-weight:800;}

/* ===== 서브페이지 히어로: 모두 캐릭터 사용 ===== */
.content-hero,.study-head,.page-interview .iv-hero{
  position:relative!important;overflow:hidden!important;margin:28px 0 20px!important;
  padding:32px 165px 32px 30px!important;border-radius:20px!important;
  background:linear-gradient(145deg,#fff 0%,#fff 62%,#fff9e5 100%)!important;
  border:1px solid #dbe3e8!important;color:var(--sg-ink)!important;
  box-shadow:0 8px 26px rgba(21,59,103,.05)!important;
}
.content-hero::after,.study-head::after,.page-interview .iv-hero::after{
  content:"";position:absolute;right:28px;top:50%;transform:translateY(-50%);
  width:108px;height:108px;border-radius:26px;background:#fff8d8 url("../assets/jaeili-avatar.png") center/cover no-repeat;
  border:1px solid #eadb98;box-shadow:0 6px 18px rgba(96,75,19,.10);
}
.content-hero::before,.study-head::before,.page-interview .iv-hero::before{
  content:"";position:absolute;left:0;top:0;width:7px;height:100%;background:linear-gradient(180deg,var(--sg-yellow),var(--sg-teal));
}
.content-hero h1,.study-title,.page-interview .iv-hero h2{color:var(--sg-navy-2)!important;line-height:1.3!important;}
.content-hero p,.study-sub,.page-interview .iv-hero p{color:#637284!important;line-height:1.85!important;opacity:1!important;}
.page-interview .iv-back{color:var(--sg-navy)!important;background:#f1f6f5!important;border:1px solid #d8e2e4!important;}
.study-head{min-height:175px;}

/* interview component colors */
.page-interview .iv-tab{border-color:#dbe3e8!important;background:#f4f8f7!important;color:var(--sg-navy)!important;}
.page-interview .iv-tab.active{background:var(--sg-navy)!important;border-color:var(--sg-navy)!important;color:#fff!important;}
.page-interview .iv-lead{background:#f6f8f7!important;border-left-color:#9fb2ba!important;color:#586878!important;line-height:1.85!important;}
.page-interview .step::before{background:var(--sg-teal)!important;}
.page-interview .iv-sec h4{color:var(--sg-teal)!important;}
.page-interview .qa[open] summary{background:#f0f6f5!important;color:var(--sg-navy)!important;}
.page-interview .chip{background:var(--sg-navy)!important;}

/* study/resume controls */
.study-badge{background:var(--sg-navy)!important;color:#fff!important;}.study-meta b{color:var(--sg-teal)!important;}.study-toc a{color:#586879!important;}.study-toc a:hover{color:var(--sg-teal)!important;}
.study-sec h3{border-bottom-color:#eef3f2!important;}
.phrase{border-left-color:var(--sg-teal)!important;}.ph-tip{color:var(--sg-teal)!important;}
.ai-input,.ai-textarea,input,select,textarea{border-color:#d7e0e5!important;border-radius:11px!important;}
.ai-input:focus,.ai-textarea:focus,input:focus,select:focus,textarea:focus{outline:none!important;border-color:#7eaaae!important;box-shadow:0 0 0 3px rgba(11,129,133,.10)!important;}
.btn-primary{background:var(--sg-teal)!important;color:#fff!important;border-color:var(--sg-teal)!important;}.btn-primary:hover{background:var(--sg-teal-2)!important;}
.btn,.btn-outline{border-color:#d4dee3!important;color:#506174!important;background:#fff!important;}.btn:hover,.btn-outline:hover{border-color:#9bb3bc!important;color:var(--sg-navy)!important;background:#f7faf9!important;}

/* ===== 시험 화면 ===== */
.exam-header{background:rgba(255,255,255,.98)!important;border-bottom:1px solid var(--sg-line)!important;box-shadow:0 5px 18px rgba(21,59,103,.055)!important;}
.exam-header-inner{max-width:1440px!important;margin:0 auto!important;padding:11px 18px!important;}
.exam-title{display:flex!important;align-items:center!important;gap:10px!important;color:var(--sg-navy)!important;font-size:1.03rem!important;}
.exam-title::before{content:"";width:36px;height:36px;flex:0 0 36px;border-radius:11px;background:#fff8d8 url("../assets/jaeili-avatar.png") center/cover no-repeat;border:1px solid #eadb98;}
.progress-fill{background:linear-gradient(90deg,var(--sg-teal),#69a44d)!important;}
.question-card,.review-card{border-color:#dbe3e8!important;border-radius:17px!important;box-shadow:0 4px 16px rgba(21,59,103,.035)!important;}
.option-item:hover{border-color:#9eb8bf!important;background:#f5faf9!important;}
.option-item.selected{border-color:var(--sg-teal)!important;background:#eff8f7!important;}

/* ===== 푸터 ===== */
.site-footer{margin-top:40px!important;padding:22px 16px 26px!important;background:#fff!important;border-top:1px solid var(--sg-line)!important;color:#8793a0!important;font-size:.72rem!important;line-height:1.75!important;text-align:center!important;}
.site-footer .footer-links{margin-bottom:7px;}.site-footer .footer-links a{color:#667687!important;text-decoration:none!important;margin:0 7px!important;}.site-footer .footer-links a:hover{color:var(--sg-navy)!important;}

/* ===== 가독성 ===== */
.readable-lines{line-height:1.95!important;}
.readable-lines .line{display:block;margin-bottom:3px;}
.content-wrap{max-width:900px!important;}.content-section{padding:26px 28px!important;}.content-section p+.content-section p{margin-top:12px;}
.content-table th,.content-table td,.iv-table th,.iv-table td{line-height:1.65!important;}

@media(max-width:1050px){
  .home-hero{grid-template-columns:1fr minmax(280px,.62fr)!important;padding:38px 36px!important;gap:28px!important;}
  .hero-visual{min-height:330px!important}.hero-visual img{height:320px!important;}
  .worker-tools-grid{grid-template-columns:repeat(3,1fr)}
  .site-nav nav{display:none!important;}
}
@media(max-width:820px){
  .container{padding-left:15px!important;padding-right:15px!important;}
  .site-nav .nav-inner,.topbar .container{min-height:62px;padding:8px 14px!important;gap:9px!important;}
  .site-brand::before,.topbar .logo::before{width:34px;height:34px;flex-basis:34px;}
  .audience-switch button,.audience-switch a{padding:7px 11px;font-size:.8rem;}
  .home-hero{grid-template-columns:1fr!important;padding:30px 24px!important;margin-top:18px!important;}
  .home-hero h1{font-size:clamp(1.9rem,8vw,2.65rem)!important;}
  .hero-visual{min-height:300px!important}.hero-visual img{height:300px!important;}
  .career-roadmap{grid-template-columns:1fr 1fr;}
  .part-grid{grid-template-columns:1fr 1fr;}.part-grid .part-link:last-child{grid-column:1/-1;}
  .worker-intro{grid-template-columns:1fr;}.worker-flow{grid-template-columns:1fr 1fr;}.worker-tools-grid{grid-template-columns:1fr 1fr;}
  .content-hero,.study-head,.page-interview .iv-hero{padding:25px 24px 25px!important;}
  .content-hero::after,.study-head::after,.page-interview .iv-hero::after{display:none;}
  .section-head{align-items:start;flex-direction:column;gap:8px;}
}
@media(max-width:560px){
  .site-brand,.topbar .logo{font-size:.98rem!important;}.topbar-actions .btn-sm{font-size:.74rem!important;padding:7px 9px!important;}
  .audience-switch{margin-left:auto;}.site-nav .topbar-actions{display:none!important;}
  .career-roadmap,.worker-tools-grid,.worker-flow{grid-template-columns:1fr;}
  .home-hero{padding:27px 20px!important;border-radius:20px!important;}.hero-visual{min-height:270px!important}.hero-visual img{height:270px!important;}
  .sg-panel,.content-section{padding:20px 17px!important;border-radius:15px!important;}
  .content-hero,.study-head,.page-interview .iv-hero{margin-top:18px!important;padding:22px 18px!important;border-radius:16px!important;}
  .exam-header-inner{align-items:flex-start!important;gap:8px!important;}.exam-header-right{gap:5px!important;}.exam-header-right .btn{padding:7px 8px!important;font-size:.73rem!important;}
}
.ai-output p,.ph-en,.ph-ko,.question-text,.option-text,.review-card p,.study-sec p,.study-sec li,.page-interview .quote,.page-interview .qa summary{word-break:keep-all!important;overflow-wrap:break-word!important;line-break:strict!important;text-wrap:pretty;}