/* AI 실전센터 — sajang.lab-bareum.com 구조를 그대로 따르되 톤만 AI용으로 교체 */
:root{
  --brand:#0f766e;--brand-deep:#115e59;--brand-soft:#e6f4f1;
  --bg:#f6f8fa;--ink:#17212b;--muted:#6b7682;--line:#e6eaee;--white:#fff;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --body:"Pretendard Variable",Pretendard,"Noto Sans KR","Malgun Gothic",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
a{text-decoration:none;color:inherit}
img{max-width:100%}

/* ── 상단 알림 바 ─────────────────────────── */
.notice-bar{position:relative;z-index:80;min-height:78px;padding:14px clamp(20px,5vw,72px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:linear-gradient(115deg,#d7ff3e,#c6f542 52%,#aeea2f);color:#172b31}
.notice-bar>div{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:2px 14px}
.notice-bar span{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.notice-bar strong{font-size:18px;letter-spacing:-.03em}
.notice-bar p{grid-column:2;margin:0;font-size:12px;font-weight:650}
.notice-bar button{border:0;border-radius:12px;background:#17343b;color:#fff;padding:14px 24px;
  font-weight:850;white-space:nowrap;cursor:pointer;font-family:inherit}

/* ── 셸/사이드바 ──────────────────────────── */
.center-shell{display:grid;min-height:100vh;grid-template-columns:244px minmax(0,1fr)}
.center-sidebar{position:sticky;z-index:20;top:0;display:flex;height:100vh;flex-direction:column;
  padding:24px 16px 18px;border-right:1px solid var(--line);background:#fff;overflow-y:auto}
.center-brand{display:flex;align-items:center;gap:11px;padding:0 9px 24px}
.center-brand__mark{display:grid;width:38px;height:38px;place-items:center;border-radius:12px;
  background:var(--brand);color:#fff;font-size:12px;font-weight:900}
.center-brand>span:last-child{display:grid;gap:2px}
.center-brand strong{font-size:15px;letter-spacing:-.04em}
.center-brand small{color:var(--muted);font-size:10px}
.center-menu-label{margin:5px 10px 8px;color:#9aa3ac;font-size:10px;font-weight:800;letter-spacing:.08em}
.center-menu{display:grid;gap:3px}
.center-menu a{display:grid;min-height:42px;grid-template-columns:31px 1fr;align-items:center;
  padding:0 11px;border-radius:10px;color:#5b6671}
.center-menu a:hover{background:#f5f7f9;color:var(--ink)}
.center-menu a.is-active{background:var(--brand-soft);color:var(--brand-deep)}
.center-menu a span{font-family:var(--mono);font-size:9px;font-weight:900}
.center-menu a strong{font-size:12px}
.center-sidebar__footer{display:grid;gap:8px;margin-top:auto;padding:15px;border:1px solid #d5e8e4;
  border-radius:14px;background:#f4fbf9}
.center-sidebar__footer strong{font-size:12px}
.center-sidebar__footer p{margin:0;color:var(--muted);font-size:10px;line-height:1.5}
.center-sidebar__footer a{color:var(--brand-deep);font-size:11px;font-weight:850}

/* ── 메인/탑바 ───────────────────────────── */
.center-main{min-width:0}
.center-topbar{position:sticky;z-index:15;top:0;display:flex;min-height:72px;align-items:center;
  justify-content:space-between;padding:12px 32px;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px)}
.center-topbar>div{color:var(--muted);font-size:11px;font-weight:750}
.center-live-dot{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#28a86b}
.center-topbar nav{display:flex;align-items:center;gap:18px}
.center-topbar nav a{color:#5b6671;font-size:12px;font-weight:800}
.center-topbar .center-topbar__primary{display:inline-flex;min-height:42px;align-items:center;
  padding:0 15px;border-radius:11px;background:var(--brand);color:#fff}
.center-workspace{width:min(1400px,100%);margin:0 auto;padding:34px 34px 70px}

/* ── 히어로 ─────────────────────────────── */
.center-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(330px,.6fr);gap:16px}
.center-hero__copy{position:relative;min-height:390px;padding:38px;overflow:hidden;border-radius:20px;
  background:linear-gradient(135deg,#0c3b39,#0f766e 62%,#2f9e8f);color:#fff}
.center-hero__copy:after{position:absolute;right:-90px;bottom:-180px;width:410px;height:410px;
  border:78px solid rgba(255,255,255,.08);border-radius:50%;content:""}
.center-hero__copy>*{position:relative;z-index:1}
.center-hero__copy>span{font-size:10px;font-weight:850;letter-spacing:.12em;opacity:.72}
.center-hero h1{max-width:710px;margin:20px 0 0;font-size:clamp(34px,5vw,60px);line-height:1.14;letter-spacing:-.065em}
.center-hero__copy>p{max-width:650px;margin:18px 0 0;color:rgba(255,255,255,.76);font-size:14px;line-height:1.75}
.center-hero__actions{display:flex;gap:9px;margin-top:34px;flex-wrap:wrap}
.center-hero__actions a{display:inline-flex;min-height:44px;align-items:center;justify-content:space-between;
  gap:28px;padding:0 16px;border:1px solid rgba(255,255,255,.36);border-radius:10px;color:#fff;font-size:12px;font-weight:850}
.center-hero__actions a:first-child{border-color:#fff;background:#fff;color:var(--brand-deep)}
.center-today{min-height:390px;padding:27px;border:1px solid var(--line);border-radius:20px;background:#fff}
.center-today__heading{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px}
.center-today__heading b{padding:5px 7px;border-radius:999px;background:#eaf7f0;color:#23835a;font-family:var(--mono);font-size:9px}
.center-today>strong{display:block;margin-top:38px;color:var(--brand);font-family:var(--mono);font-size:58px;letter-spacing:-.07em}
.center-today>p{margin:5px 0 30px;color:var(--muted);font-size:12px}
.center-today ul{margin:0;padding:0;border-top:1px solid var(--line);list-style:none}
.center-today li{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--line);font-size:11px}
.center-today li span{color:var(--muted)}
.center-today li b{color:var(--ink)}

/* ── 섹션/검색 ───────────────────────────── */
.center-section{margin-top:42px;scroll-margin-top:90px}
.center-section__heading{display:flex;align-items:end;justify-content:space-between;gap:30px}
.center-section__heading span{color:var(--brand);font-size:10px;font-weight:850}
.center-section__heading h2{margin:8px 0 0;font-size:27px;letter-spacing:-.05em}
.center-section__heading>p{max-width:420px;margin:0;color:var(--muted);font-size:12px;line-height:1.65}
.center-finder{display:grid;grid-template-columns:minmax(280px,1fr) auto;align-items:center;gap:12px 18px;
  margin-top:20px;padding:16px;border:1px solid #dfe6ea;border-radius:16px;background:#fff}
.center-finder>label{display:flex;min-height:46px;align-items:center;gap:10px;padding:0 13px;
  border:1px solid #d9e1e6;border-radius:11px;background:#f8fafb}
.center-finder>label:focus-within{border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px rgba(15,118,110,.1)}
.center-finder label>span{color:#72808a;font-size:22px}
.center-finder input{min-width:0;flex:1 1;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:12px}
.center-filter-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.center-filter-chips::-webkit-scrollbar{display:none}
.center-filter-chips button{min-height:36px;padding:0 12px;border:1px solid #dfe6ea;border-radius:999px;
  background:#fff;color:#68737d;font-size:10px;font-weight:800;white-space:nowrap;cursor:pointer;font-family:inherit}
.center-filter-chips button.is-active{border-color:var(--brand);background:var(--brand);color:#fff}
.center-finder>p{grid-column:1/-1;margin:-2px 0 0;color:#77838c;font-size:10px}
.center-finder>p b{color:var(--brand);font-family:var(--mono)}
.center-search-empty{margin-top:20px;padding:55px 20px;border:1px dashed #cbd5da;border-radius:16px;background:#fff;text-align:center}
.center-search-empty p{color:var(--muted);font-size:11px}

/* ── 카테고리 카드 ────────────────────────── */
.center-category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}
.center-category{position:relative;display:flex;min-height:230px;flex-direction:column;padding:21px;
  border:1px solid var(--line);border-radius:16px;background:#fff;scroll-margin-top:90px;transition:.16s}
a.center-category:hover{border-color:#a9d5cd;box-shadow:0 10px 30px rgba(15,118,110,.08);transform:translateY(-2px)}
.center-category__mark{display:grid;width:31px;height:31px;place-items:center;border-radius:9px;
  background:#f1f4f6;color:#77818b;font-family:var(--mono);font-size:9px;font-weight:900}
.center-category__status{position:absolute;top:21px;right:21px;padding:5px 7px;border-radius:999px;
  background:#f1f3f5;color:#8b949d;font-size:9px;font-weight:800}
.center-category__status.is-live{background:var(--brand-soft);color:var(--brand-deep)}
.center-category h3{margin:26px 0 8px;font-size:19px;letter-spacing:-.04em}
.center-category p{margin:0;color:var(--muted);font-size:12px;line-height:1.65}
.center-category>b{margin-top:auto;padding-top:18px;color:var(--brand);font-size:10px}

/* ── 원칙/푸터 ───────────────────────────── */
.center-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:42px;overflow:hidden;
  border:1px solid var(--line);border-radius:16px;background:var(--line)}
.center-principles>div{padding:22px;background:#fff}
.center-principles span{color:var(--brand);font-family:var(--mono);font-size:9px;font-weight:900}
.center-principles strong{display:block;margin-top:13px;font-size:14px}
.center-principles p{margin:7px 0 0;color:var(--muted);font-size:11px;line-height:1.6}
.center-footer{display:flex;justify-content:space-between;gap:30px;margin-top:54px;padding-top:22px;
  border-top:1px solid var(--line);color:var(--muted);font-size:10px;line-height:1.6}
.center-footer p{margin:0}
.center-footer__legal{display:flex;gap:16px;margin-top:10px}
.center-footer__legal a{color:#5b6671;font-size:11px;font-weight:750}
.center-footer__legal a:hover{color:var(--brand)}

/* ── 서브페이지 공통 블록 ─────────────────── */
.page-head{padding:30px 34px;border-radius:20px;background:linear-gradient(135deg,#0c3b39,#0f766e 70%,#2f9e8f);color:#fff}
.page-head span{font-family:var(--mono);font-size:10px;font-weight:900;letter-spacing:.12em;opacity:.72}
.page-head h1{margin:12px 0 0;font-size:clamp(26px,3.4vw,38px);letter-spacing:-.05em;line-height:1.2}
.page-head p{margin:14px 0 0;max-width:760px;color:rgba(255,255,255,.78);font-size:13px;line-height:1.75}
.block{margin-top:34px}
.block>h2{margin:0 0 6px;font-size:20px;letter-spacing:-.04em}
.block>.sub{margin:0 0 18px;color:var(--muted);font-size:12px;line-height:1.7}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.card{padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff}
.card h3{margin:0 0 8px;font-size:15px;letter-spacing:-.03em}
.card p{margin:0;color:var(--muted);font-size:12px;line-height:1.7}
.card .tag{display:inline-block;margin-bottom:10px;padding:4px 8px;border-radius:999px;
  background:var(--brand-soft);color:var(--brand-deep);font-size:9px;font-weight:800}
.card ul{margin:10px 0 0;padding-left:16px;color:var(--muted);font-size:12px;line-height:1.8}
.steps{counter-reset:s;display:grid;gap:10px}
.steps>li{list-style:none;position:relative;padding:16px 18px 16px 52px;border:1px solid var(--line);
  border-radius:14px;background:#fff;font-size:13px;line-height:1.7}
.steps>li:before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;left:18px;top:16px;
  font-family:var(--mono);font-size:11px;font-weight:900;color:var(--brand)}
.steps>li b{display:block;margin-bottom:4px;font-size:14px}
.steps>li span{color:var(--muted);font-size:12px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:#fff}
table{width:100%;border-collapse:collapse;font-size:12px;min-width:640px}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.65}
th{background:#f8fafb;color:#54606a;font-size:11px;font-weight:800;white-space:nowrap}
td b{color:var(--ink)}
tr:last-child td{border-bottom:0}
.prompt{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.prompt__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.prompt__head strong{font-size:14px;letter-spacing:-.03em}
.prompt__head small{display:block;margin-top:3px;color:var(--muted);font-size:11px;font-weight:500}
.prompt__head button{border:1px solid var(--brand);border-radius:9px;background:#fff;color:var(--brand-deep);
  padding:9px 13px;font-size:10px;font-weight:850;cursor:pointer;white-space:nowrap;font-family:inherit}
.prompt__head button.done{background:var(--brand);color:#fff}
.prompt pre{margin:0;padding:18px;white-space:pre-wrap;font-family:var(--mono);font-size:11.5px;line-height:1.85;color:#2b3742;background:#fbfcfd}
.note{margin-top:20px;padding:18px 20px;border-left:3px solid var(--brand);border-radius:0 14px 14px 0;
  background:var(--brand-soft);color:#134e4a;font-size:12px;line-height:1.8}
.note b{font-weight:850}
.warn{border-left-color:#e0803c;background:#fff4ea;color:#7a4715}
.faq{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:16px 18px;font-size:13px;font-weight:800;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"＋";margin-right:9px;color:var(--brand);font-weight:900}
.faq details[open] summary:before{content:"－"}
.faq p{margin:0;padding:0 18px 18px;color:var(--muted);font-size:12px;line-height:1.8}

/* ── 진단 위저드 ─────────────────────────── */
.quiz{border:1px solid var(--line);border-radius:18px;background:#fff;padding:26px}
.quiz__bar{height:6px;border-radius:999px;background:#eef2f4;overflow:hidden;margin-bottom:20px}
.quiz__bar i{display:block;height:100%;background:var(--brand);transition:.25s}
.quiz__q{font-size:19px;letter-spacing:-.04em;margin:0 0 4px}
.quiz__hint{margin:0 0 18px;color:var(--muted);font-size:12px}
.quiz__opts{display:grid;gap:8px}
.quiz__opts button{text-align:left;padding:15px 17px;border:1px solid var(--line);border-radius:12px;
  background:#fff;font-family:inherit;font-size:13px;cursor:pointer;transition:.14s}
.quiz__opts button:hover{border-color:var(--brand);background:var(--brand-soft)}
.quiz__nav{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-size:11px;color:var(--muted)}
.quiz__nav button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 12px;
  font-size:11px;font-weight:800;cursor:pointer;font-family:inherit;color:#5b6671}
.result h3{margin:0 0 6px;font-size:22px;letter-spacing:-.04em}
.result>p{margin:0 0 20px;color:var(--muted);font-size:12px;line-height:1.7}

/* ── 반응형 ─────────────────────────────── */
@media(max-width:1180px){
  .center-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .center-hero{grid-template-columns:1fr}
  .center-today{min-height:0}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .center-shell{display:block}
  .center-sidebar{position:sticky;width:100%;height:auto;padding:11px 14px;border-right:0;border-bottom:1px solid var(--line)}
  .center-brand{padding:0}
  .center-brand small,.center-menu-label,.center-sidebar__footer{display:none}
  .center-menu{display:flex;gap:5px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
  .center-menu::-webkit-scrollbar{display:none}
  .center-menu a{min-height:36px;flex:0 0 auto;grid-template-columns:auto auto;gap:7px;padding:0 11px}
  .center-topbar{top:106px;padding:10px 16px;justify-content:flex-end}
  .center-topbar>div,.center-topbar nav>a:first-child{display:none}
  .center-workspace{padding:24px 18px 60px}
  .center-hero__copy{min-height:auto;padding:25px}
  .center-hero h1{font-size:34px}
  .center-hero__actions{align-items:stretch;flex-direction:column}
  .center-category-grid,.grid2,.grid3{grid-template-columns:1fr}
  .center-category{min-height:200px}
  .center-section__heading{align-items:start;flex-direction:column}
  .center-principles{grid-template-columns:1fr}
  .center-finder{grid-template-columns:1fr}
  .center-finder>p{grid-column:1}
  .center-footer{flex-direction:column}
  .notice-bar{padding:12px 16px}
  .notice-bar>div{display:block}
  .notice-bar p{display:none}
  .notice-bar strong{display:block;font-size:14px}
  .notice-bar button{padding:11px 14px}
  .page-head{padding:24px 20px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}