/* epmforum 사이트 스타일. 구성: 1) 모의고사 확정 v3 토큰과 공통 부품 2) 디자인팀 사이트 시안 CSS(그대로) 3) 개발 쪽 덧붙임.
   글꼴은 로컬 Pretendard(OFL). 외부 글꼴 서버 없음. 자바스크립트 없이도 읽히도록 만든다. */
:root{--color-primary:#16233F;--color-primary-hover:#0F1A30;--color-primary-active:#0A1224;--color-primary-subtle:#E7ECF3;--color-accent:#236B78;--color-accent-hover:#1F6570;--color-accent-subtle:#E7F1F2;--color-text-primary:#1B2733;--color-text-secondary:#374151;--color-text-muted:#5B6876;--color-text-disabled:#9CA3AF;--color-text-inverse:#FFFFFF;--color-text-inverse-muted:#C9D3E3;--color-text-link:var(--color-accent);--color-bg-page:#F5F7FB;--color-bg-surface:#FFFFFF;--color-bg-subtle:#F3F4F6;--color-bg-inverse:#16233F;--color-border:#D1D5DB;--color-border-input:#6B7280;--color-border-focus:#16233F;--color-border-inverse:#9CA3AF;--color-highlight:#E08A2B;--hero-bg:#16233F;--hero-deco:none}
@font-face{font-family:Pretendard;font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/Pretendard-Regular.woff2) format("woff2")}
@font-face{font-family:Pretendard;font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/Pretendard-Medium.woff2) format("woff2")}
@font-face{font-family:Pretendard;font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/Pretendard-SemiBold.woff2) format("woff2")}
@font-face{font-family:Pretendard;font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/Pretendard-Bold.woff2) format("woff2")}
:root{--font-family-base:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fs-caption:13px;--fs-small:14px;--fs-body:16px;--fs-reading:17px;--fs-h2:20px;--fs-h1:26px;--lh-tight:1.35;--lh-base:1.6;--lh-reading:1.75;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-1:0 1px 2px 0 rgba(16,24,40,.06),0 1px 3px 0 rgba(16,24,40,.1);--shadow-2:0 4px 8px -2px rgba(16,24,40,.14),0 2px 4px -2px rgba(16,24,40,.08);--touch:44px;--reading-max:760px;--page-max:1160px;--page-pad:16px;--focus-width:3px;--focus-offset:2px;--color-success:#166534;--color-success-bg:#ECFDF3;--color-warning:#92400E;--color-warning-strong:#7A2E0E;--color-warning-bg:#FEF3C7;--color-warning-border:#B45309;--color-error:#B42318;--color-error-bg:#FEF3F2}
@media(min-width:1024px){:root{--fs-small:15px;--fs-reading:18px;--fs-h2:24px;--fs-h1:36px;--page-pad:40px}}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font-family-base);font-size:var(--fs-body);line-height:var(--lh-base);color:var(--color-text-primary);background:var(--color-bg-page);word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;height:auto}
button{font:inherit}
a{color:var(--color-text-link)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.icon{width:20px;height:20px;flex:none}
.icon-sm{width:16px;height:16px;flex:none}
:focus-visible{outline:var(--focus-width) solid var(--color-border-focus);outline-offset:var(--focus-offset)}
.on-dark :focus-visible{outline-color:#fff}
.page{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--touch);padding:0 var(--space-4);font-size:var(--fs-small);font-weight:var(--fw-semibold);line-height:1.3;text-decoration:none;text-align:center;border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;white-space:nowrap}
.btn-lg{min-height:52px;padding:0 var(--space-5);font-size:var(--fs-body);font-weight:var(--fw-bold)}
.btn-block{width:100%}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover{background:var(--color-primary-hover);text-decoration:underline;text-underline-offset:3px;box-shadow:var(--shadow-2)}
.btn-primary:active{background:var(--color-primary-active);box-shadow:inset 0 2px #00000059;text-decoration:underline;text-underline-offset:3px}
.btn-secondary{background:var(--color-bg-surface);color:var(--color-accent);border-color:var(--color-accent)}
.btn-secondary:hover{background:var(--color-primary-subtle);color:var(--color-accent-hover);border-color:var(--color-accent-hover);text-decoration:underline;text-underline-offset:3px}
.btn-secondary:active{background:var(--color-primary-subtle);box-shadow:inset 0 2px #0000002e;text-decoration:underline;text-underline-offset:3px}
.btn-inverse{background:#fff;color:var(--color-primary)}
.btn-inverse:hover{background:var(--color-primary-subtle);text-decoration:underline;text-underline-offset:3px;box-shadow:0 0 0 2px #fff9}
.btn-ghost-dark{background:transparent;color:#fff;border-color:#fff}
.btn-ghost-dark:hover{background:#ffffff1f;text-decoration:underline;text-underline-offset:3px}
.btn.is-disabled,.btn[aria-disabled="true"]{background:var(--color-bg-subtle);color:var(--color-text-disabled);border:2px dashed var(--color-border);box-shadow:none;cursor:not-allowed;text-decoration:none}
.hero{background:var(--hero-bg);color:#fff;position:relative;overflow:hidden}
.hero .page{position:relative;z-index:1}
.hero h1{line-height:var(--lh-tight);font-weight:var(--fw-bold);letter-spacing:-.01em}
.hero .highlight{color:var(--color-highlight);font-weight:var(--fw-bold)}
.card{background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4)}
@media(min-width:1024px){.card{padding:var(--space-5)}}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-caption);font-weight:var(--fw-semibold);padding:1px var(--space-2);border-radius:999px;border:1px solid currentColor;line-height:1.6;white-space:nowrap}
.site-foot{margin-top:var(--space-7);background:var(--color-bg-inverse);color:#fff;font-size:var(--fs-small);padding:var(--space-5) 0}
.site-foot p+p{margin-top:var(--space-1);color:var(--color-text-inverse-muted)}
.alert{display:grid;grid-template-columns:24px 1fr;gap:var(--space-2);border-radius:var(--radius-md);border:1px solid;border-left-width:4px;padding:var(--space-3) var(--space-4);font-size:var(--fs-small);background:var(--color-bg-surface)}
.alert-info{border-color:var(--color-accent);background:var(--color-primary-subtle)}
.alert-info svg{color:var(--color-accent)}
.alert-error{border-color:var(--color-error);background:var(--color-error-bg);color:var(--color-error)}
.alert-error svg{color:var(--color-error)}
.alert p{color:var(--color-text-primary)}


/* ===== 디자인팀 사이트 시안 CSS (기준 문서 6절, 그대로) ===== */
/* epmforum 사이트 시안 1차 (2026-10-02). v3 common.css + tokens 위에 사이트 부품만 더한다.
   새 색은 만들지 않는다. 새 변수는 v3 이름 체계(--color-*, --space-*, --fs-*)를 잇는다. */
:root {
  --lbl-plan: "epmforum 사이트 시안 1차 / 시안 전용, 실제 화면 아님";
  --header-h: 60px;
  --color-bg-nav-hover: var(--color-primary-subtle);   /* 머리 메뉴 올림 */
  --color-bg-nav-active: #E0E7F0;                       /* 누름: primary-subtle 보다 한 단계 진하게(새 값, 아래 대비 표) */
  --color-bg-item-pinned: var(--color-primary-subtle);  /* 공지 고정 칸 */
  --color-bg-code: var(--color-bg-subtle);              /* pre code */
  --color-bg-table-head: var(--color-primary-subtle);
  --color-quote-bar: var(--color-accent);
  --color-scrim: rgba(22, 35, 63, 0.45);                /* 메뉴 열림 때 아래 화면 덮개 */
  --mock-card-accent: var(--color-primary);             /* 모의고사 카드 윗선 */
  --side-w: 280px;
}
@media (min-width: 768px) { :root { --page-pad: 24px; } }
@media (min-width: 1024px) { :root { --page-pad: 40px; } }

.btn-wrap { white-space: normal; }
.btn-xl { min-height: 64px; padding: var(--space-3) var(--space-5); font-size: 17px; font-weight: var(--fw-bold); line-height: 1.35; }

/* ---------- 머리 ---------- */
.skip { position: absolute; left: 8px; top: -60px; background: #fff; color: var(--color-primary); padding: 8px 12px; z-index: 50; }
.site-header { background: var(--color-bg-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 30; }
.hd-row { display: flex; align-items: center; gap: var(--space-2); min-height: var(--header-h); }
.hd-logo { margin-right: auto; display: inline-flex; align-items: center; min-height: var(--touch); font-size: 22px; font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); text-decoration: none; }
.hd-mock { min-height: var(--touch); padding: 0 12px; font-size: var(--fs-small); }
.hd-icon { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: var(--touch); min-height: var(--touch); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-primary); font-size: var(--fs-small); font-weight: var(--fw-semibold); text-decoration: none; cursor: pointer; }
.hd-icon:hover, .hd-icon.is-hover { background: var(--color-bg-nav-hover); text-decoration: underline; text-underline-offset: 3px; }
.hd-icon:active, .hd-icon.is-active { background: var(--color-bg-nav-active); box-shadow: inset 0 2px 0 rgba(0,0,0,0.18); }
.hd-icon[aria-expanded="true"] { background: var(--color-primary-subtle); }
.hd-nav { display: none; }
.nav-link { min-width: var(--touch); justify-content: center; display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 var(--space-3); color: var(--color-text-primary); font-size: 17px; font-weight: var(--fw-semibold); text-decoration: none; border-radius: var(--radius-sm); position: relative; white-space: nowrap; }
.nav-link:hover, .nav-link.is-hover { background: var(--color-bg-nav-hover); text-decoration: underline; text-underline-offset: 4px; }
.nav-link:active, .nav-link.is-active { background: var(--color-bg-nav-active); }
.nav-link[aria-current="page"] { font-weight: var(--fw-bold); color: var(--color-primary); box-shadow: inset 0 -2px 0 var(--color-primary); border-radius: 0; }
.nav-link.is-disabled { color: var(--color-text-disabled); cursor: not-allowed; text-decoration: none; background: transparent; }
@media (min-width: 960px) {
  .hd-nav { display: flex; align-items: center; gap: var(--space-1); margin: 0 auto 0 var(--space-5); }
  .hd-logo { margin-right: 0; }
  .hd-menu { display: none; }
  .hd-row { gap: var(--space-2); }
}
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--color-bg-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-2); }
.menu-list { padding: var(--space-2) 0; }
.menu-link { display: flex; align-items: center; min-height: 52px; padding: 0 var(--page-pad); font-size: 17px; font-weight: var(--fw-semibold); color: var(--color-text-primary); text-decoration: none; border-left: 4px solid transparent; }
.menu-link:active, .menu-link.is-active { background: var(--color-bg-nav-active); }
.menu-link:hover, .menu-link.is-hover { background: var(--color-bg-nav-hover); text-decoration: underline; text-underline-offset: 4px; }
.menu-link[aria-current="page"] { border-left-color: var(--color-primary); background: var(--color-primary-subtle); color: var(--color-primary); font-weight: var(--fw-bold); }
.menu-sub { border-top: 1px solid var(--color-border); padding: var(--space-2) 0 var(--space-3); }
.menu-sub .menu-link { min-height: 48px; font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--color-text-secondary); }
.scrim-page { position: fixed; inset: 0; background: var(--color-scrim); z-index: 10; }

/* ---------- 바닥글(딥네이비, 모의고사 앱과 같은 .site-foot) ---------- */
.site-foot { margin-top: var(--space-7); padding: var(--space-6) 0; }
.site-foot a { color: #FFFFFF; text-underline-offset: 3px; }
.foot-name { font-weight: var(--fw-bold); font-size: var(--fs-body); color: #fff; }
.foot-links { margin-top: var(--space-4); display: grid; }
.foot-links a { display: flex; align-items: center; min-height: var(--touch); min-width: var(--touch); }
.foot-contact { margin-top: var(--space-3); display: grid; gap: 0; }
.foot-contact a { min-width: var(--touch); display: inline-flex; align-items: center; min-height: var(--touch); }
.foot-small { margin-top: var(--space-4); font-size: var(--fs-caption); color: var(--color-text-inverse-muted); }
@media (min-width: 768px) {
  .foot-links { display: flex; flex-wrap: wrap; column-gap: var(--space-5); }
  .foot-contact { display: flex; flex-wrap: wrap; column-gap: var(--space-5); }
  .site-foot { margin-top: 48px; }
}

/* ---------- 쪽 틀 ---------- */
.main { padding-top: var(--space-5); }
.crumb { display: inline-flex; align-items: center; gap: 6px; min-height: var(--touch); font-size: var(--fs-small); color: var(--color-text-link); text-decoration: underline; text-underline-offset: 3px; }
.page-title { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.eyebrow { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-text-muted); }

/* 정보 알림 줄(두 줄 붙임) */
.alert-stack { display: grid; }
.alert-stack .alert { border-radius: 0; align-items: start; }
.alert-stack .alert:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.alert-stack .alert:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.alert-stack .alert:only-child { border-radius: var(--radius-md); }
.alert-stack .alert + .alert { margin-top: -1px; }
.alert svg { margin-top: 2px; }

/* 꼬리표 */
.tag-notice { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.tag-attach { color: var(--color-accent); background: var(--color-bg-surface); }
.tag-reply { color: var(--color-text-muted); background: var(--color-bg-surface); }
.tag-old { color: var(--color-text-muted); background: var(--color-bg-subtle); }
.tag-new { color: var(--color-text-secondary); background: var(--color-bg-subtle); border-color: var(--color-border); font-weight: var(--fw-medium); margin-left: var(--space-2); }
/* 디자인팀 10-03 권장: R2 주제 카드의 글 수는 링크보다 가볍게, R9 한 칸 목록 폭, R11 새 글 본문 첫 표지 그림은 글 보기에서 숨김(제목과 같은 그림) */
.path-card .list-plain .tag { border-color: transparent; background: none; color: var(--color-text-muted); font-weight: var(--fw-regular, 400); }
.layout-list { max-width: 880px; }
.prose.is-new > p:first-child:has(> img:only-child) { display: none; }
.tag-area { color: var(--color-text-secondary); background: var(--color-bg-surface); border-color: var(--color-border-input); font-weight: var(--fw-medium); }

/* ---------- 글 목록 한 칸 ---------- */
.post-list { margin-top: var(--space-4); border-top: 1px solid var(--color-border-input); background: var(--color-bg-surface); }
.post-list > li { border-bottom: 1px solid var(--color-border); }
.post-item { display: grid; gap: 6px; min-height: 56px; padding: var(--space-3) var(--page-pad); color: var(--color-text-primary); text-decoration: none; }
.post-title { font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-title .tag { margin-right: 6px; vertical-align: 1px; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); font-size: var(--fs-small); color: var(--color-text-muted); }
.post-meta .cmt, .post-meta time { display: inline-flex; align-items: center; gap: 4px; }
.post-item:hover, .post-item.is-hover { background: var(--color-bg-nav-hover); }
.post-item:hover .post-title, .post-item.is-hover .post-title { text-decoration: underline; text-underline-offset: 3px; }
.post-item:active, .post-item.is-active { background: var(--color-bg-nav-active); }
.post-item.is-pinned { background: var(--color-bg-item-pinned); }
.post-item.is-pinned .post-title { font-weight: var(--fw-bold); }
.post-item.is-focus, .post-item:focus-visible { outline: var(--focus-width) solid var(--color-border-focus); outline-offset: -3px; }
.post-item.is-gone { color: var(--color-text-disabled); }
.post-head { display: none; }
@media (min-width: 768px) {
  .post-list { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
  .post-head, .post-item { display: grid; grid-template-columns: minmax(0, 1fr) 104px 104px 76px; align-items: center; column-gap: var(--space-3); padding: var(--space-3) var(--space-4); }
  .post-head { background: var(--color-bg-table-head); font-size: var(--fs-small); font-weight: var(--fw-bold); border-bottom: 1px solid var(--color-border-input); }
  .post-meta { display: contents; }
  .post-item { gap: 0 var(--space-3); }
  .post-meta time { grid-column: 2; grid-row: 1; }
  .post-meta .att { grid-column: 3; grid-row: 1; }
  .post-meta .cmt { grid-column: 4; grid-row: 1; }
  .post-head span:nth-child(n+2) { text-align: left; }
}

/* ---------- 쪽 넘김 ---------- */
.pager { margin-top: var(--space-5); }
.pg-m { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-2); }
.pg-m .pg-now { font-size: var(--fs-small); font-weight: var(--fw-bold); text-align: center; padding: 0 var(--space-1); }
.pg-m .pg-now small { font-weight: var(--fw-medium); color: var(--color-text-muted); font-size: var(--fs-small); }
.pg-d { display: none; }
.pg-btn { min-width: var(--touch); }
.pg-d ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); align-items: center; }
.pg-num { display: inline-flex; align-items: center; justify-content: center; min-width: var(--touch); min-height: var(--touch); padding: 0 var(--space-2); border-radius: var(--radius-md); border: 2px solid transparent; color: var(--color-text-primary); font-size: var(--fs-small); font-weight: var(--fw-semibold); text-decoration: none; font-variant-numeric: tabular-nums; }
.pg-num:hover, .pg-num.is-hover { background: var(--color-bg-nav-hover); text-decoration: underline; text-underline-offset: 3px; }
.pg-num:active, .pg-num.is-active { background: var(--color-bg-nav-active); }
.pg-num[aria-current="page"] { background: var(--color-primary); color: #fff; font-weight: var(--fw-bold); }
.pg-gap { min-width: 28px; text-align: center; color: var(--color-text-muted); }
.pg-end { margin-top: var(--space-2); text-align: center; font-size: var(--fs-caption); color: var(--color-text-muted); }
@media (min-width: 768px) { .pg-m { display: none; } .pg-d { display: block; } }

/* ---------- 모의고사 카드 ---------- */
.mock-card { position: relative; overflow: hidden; background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: calc(var(--space-4) + 4px) var(--space-4) var(--space-4); display: grid; gap: var(--space-3); box-shadow: var(--shadow-1); }
.mock-card h2, .mock-card h3 { font-size: 18px; font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.mock-card p { font-size: var(--fs-small); color: var(--color-text-secondary); }
.mock-card .btn { width: 100%; }
@media (min-width: 768px) {
  .mock-card.is-below { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); align-items: center; column-gap: var(--space-5); padding: var(--space-5); }
  .mock-card.is-below .mc-text { display: grid; gap: var(--space-1); }
}
.mock-card.is-side { padding: var(--space-4); }

/* ---------- 글 읽기 모양 ---------- */
.post-meta-line { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: 2px 0; font-size: var(--fs-small); color: var(--color-text-muted); }
.post-meta-line span + span { border-left: 1px solid var(--color-border-input); margin-left: var(--space-3); padding-left: var(--space-3); }
.prose { margin-top: var(--space-5); font-size: var(--fs-reading); line-height: var(--lh-reading); color: var(--color-text-primary); }
.prose > * + * { margin-top: var(--space-4); }
.prose strong { font-weight: var(--fw-bold); }
.prose em { font-style: italic; }
/* 접는 정답(「이번 주 문제」, 10-06): <details class="answer" data-pagefind-ignore><summary>정답과 해설 보기</summary> … </details> */
.prose details.answer { border: 1px solid var(--color-border-input); border-radius: var(--radius-md); background: var(--color-bg-surface); }
.prose details.answer > summary { min-height: 48px; display: flex; align-items: center; padding: 0 var(--space-4); cursor: pointer; font-weight: var(--fw-bold); }
.prose details.answer[open] > summary { border-bottom: 1px solid var(--color-border); }
.prose details.answer > :not(summary) { margin: var(--space-3) var(--space-4); }
.prose u { text-decoration: underline; text-underline-offset: 3px; }
.prose s { text-decoration: line-through; color: var(--color-text-muted); }
.prose a { color: var(--color-text-link); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--color-accent-hover); text-decoration-thickness: 2px; }
.prose h2 { margin-top: var(--space-6); font-size: 22px; line-height: var(--lh-tight); font-weight: var(--fw-bold); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.prose h3 { margin-top: var(--space-5); font-size: 19px; line-height: var(--lh-tight); font-weight: var(--fw-bold); }
.prose h4 { margin-top: var(--space-5); font-size: var(--fs-reading); line-height: var(--lh-tight); font-weight: var(--fw-bold); color: var(--color-text-secondary); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--space-1); }
.prose li > ul, .prose li > ol { margin-top: var(--space-1); }
.prose ul ul { list-style: circle; }
.prose blockquote { margin-left: 0; margin-right: 0; padding: var(--space-3) var(--space-4); border-left: 4px solid var(--color-quote-bar); background: var(--color-bg-surface); border-radius: 0 var(--radius-md) var(--radius-md) 0; color: var(--color-text-secondary); }
.prose blockquote p + p { margin-top: var(--space-2); }
.prose img { display: block; width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-surface); }
.table-hint { margin-bottom: var(--space-1); font-size: var(--fs-caption); color: var(--color-text-muted); }
@media (min-width: 768px) { .table-hint { display: none; } }
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border-input); border-radius: var(--radius-md); background: var(--color-bg-surface); -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline: var(--focus-width) solid var(--color-border-focus); outline-offset: var(--focus-offset); }
.prose table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 15px; line-height: 1.5; }
.prose th, .prose td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border); text-align: left; vertical-align: top; overflow-wrap: normal; word-break: keep-all; }
.prose th:last-child, .prose td:last-child { border-right: 0; }
.prose tr:last-child td { border-bottom: 0; }
.prose thead th { background: var(--color-bg-table-head); font-weight: var(--fw-bold); border-bottom: 1px solid var(--color-border-input); white-space: nowrap; }
.prose pre { margin-left: 0; margin-right: 0; padding: var(--space-3) var(--space-4); background: var(--color-bg-code); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow-x: auto; font-size: 14px; line-height: 1.6; tab-size: 4; }
.prose pre:focus-visible { outline: var(--focus-width) solid var(--color-border-focus); outline-offset: var(--focus-offset); }
.prose pre code { font-family: "D2Coding", Consolas, "Courier New", monospace; white-space: pre; overflow-wrap: normal; word-break: normal; }
.prose p code { font-family: Consolas, "Courier New", Pretendard, monospace; font-size: 0.92em; word-spacing: -0.15em; background: var(--color-bg-code); padding: 0 4px; border-radius: var(--radius-sm); }

/* ---------- 첨부 목록, 댓글 ---------- */
.sec-title { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.attach-list { margin-top: var(--space-3); border-top: 1px solid var(--color-border-input); }
.attach-list li { border-bottom: 1px solid var(--color-border); }
.attach { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--space-2); align-items: start; padding: var(--space-3) 0; min-height: 56px; }
.attach svg { margin-top: 3px; color: var(--color-accent); }
.attach .fname { font-size: var(--fs-small); font-weight: var(--fw-medium); overflow-wrap: anywhere; line-height: 1.5; }
.attach .dl { grid-column: 2; margin-top: 2px; display: inline-flex; align-items: center; min-height: var(--touch); color: var(--color-text-link); font-size: var(--fs-small); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; width: fit-content; }
.attach .dl:hover, .attach .dl.is-hover { color: var(--color-accent-hover); text-decoration-thickness: 2px; }
.attach.is-missing .fname { color: var(--color-text-muted); }
.attach.is-missing svg { color: var(--color-text-disabled); }
.attach .miss { grid-column: 2; font-size: var(--fs-small); color: var(--color-text-muted); margin-top: 2px; }
.cmt-list { margin-top: var(--space-3); border-top: 1px solid var(--color-border-input); }
.cmt-list li { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.cmt-head { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); font-size: var(--fs-small); color: var(--color-text-muted); }
.cmt-head b { color: var(--color-text-primary); font-weight: var(--fw-bold); }
.cmt-body { margin-top: var(--space-1); font-size: var(--fs-body); line-height: 1.7; }
.post-nav { margin-top: var(--space-6); display: grid; gap: var(--space-3); }
.post-nav a.nv { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); min-height: 64px; border: 1px solid var(--color-border-input); border-radius: var(--radius-md); background: var(--color-bg-surface); color: var(--color-text-primary); text-decoration: none; }
.post-nav a.nv small { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--color-text-muted); }
.post-nav a.nv span { font-size: var(--fs-small); font-weight: var(--fw-semibold); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-nav a.nv:hover { background: var(--color-bg-nav-hover); }
@media (min-width: 768px) { .post-nav { grid-template-columns: 1fr 1fr; } }

.layout-post { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.layout-post > * { min-width: 0; }
.side-col { display: grid; gap: var(--space-5); align-content: start; }
.side-col .side-box { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }
.side-col h2 { font-size: var(--fs-body); font-weight: var(--fw-bold); }
.side-list { margin-top: var(--space-2); }
.side-list li + li { border-top: 1px solid var(--color-border); }
.side-list a { display: block; padding: var(--space-2) 0; min-height: 44px; font-size: var(--fs-small); color: var(--color-text-primary); }
.side-list small { display: block; color: var(--color-text-muted); font-size: var(--fs-caption); }
.side-sticky { position: sticky; top: calc(var(--header-h) + var(--space-4)); display: grid; gap: var(--space-5); }
.only-wide { display: none; }
.only-narrow { display: block; }
@media (min-width: 1024px) {
  .layout-post { grid-template-columns: minmax(0, 1fr) var(--side-w); column-gap: 40px; align-items: start; }
  .only-wide { display: block; }
  .only-narrow { display: none; }
}

/* ---------- 첫 화면 ---------- */
.hero .page { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.hero .site-line { font-size: var(--fs-small); color: var(--color-text-inverse-muted); line-height: 1.5; }
.hero .site-line b { color: #fff; font-weight: var(--fw-semibold); }
.hero h1 { margin-top: var(--space-3); font-size: 30px; }
.hero .lead { margin-top: var(--space-2); font-size: var(--fs-body); line-height: 1.55; }
.hero .cta { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.hero .cta .btn { width: 100%; }
.hero .reader-note { margin-top: var(--space-3); font-size: var(--fs-caption); color: var(--color-text-inverse-muted); }
@media (min-width: 768px) {
  .hero .cta { grid-template-columns: auto auto; justify-content: start; }
  .hero .cta .btn { width: auto; }
  .hero .cta .btn-xl { min-width: 360px; }
}
@media (min-width: 1024px) {
  .hero .page { padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .hero h1 { font-size: 40px; }
  .hero .lead { font-size: 19px; }
}
.hero-wrap { background: var(--hero-bg); }
.paths { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.path-card { display: flex; flex-direction: column; gap: var(--space-2); }
.path-card h3 { font-size: 18px; font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.path-card p { font-size: var(--fs-small); color: var(--color-text-secondary); }
/* 대표 의견(10-03): 카드 단추는 카드 맨 아래 오른쪽에 맞춰 나란히 */
.path-card .btn { align-self: flex-end; margin-top: auto; }
.path-card > .btn:only-of-type { margin-top: auto; }
.path-card > ul + .btn, .path-card > p + .btn { margin-top: auto; padding-top: 0; }
@media (min-width: 768px) { .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .paths { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }
.sec { padding-top: var(--space-6); }
@media (min-width: 1024px) { .sec { padding-top: 48px; } }

.book-card { margin-top: var(--space-4); display: grid; gap: var(--space-4); }
.cover-slot { aspect-ratio: 3 / 4; width: 56%; max-width: 220px; border: 1px dashed var(--color-border-input); border-radius: var(--radius-md); background: var(--color-bg-surface); display: grid; place-items: center; font-size: var(--fs-small); color: var(--color-text-muted); }
.book-card h3 { font-size: 18px; font-weight: var(--fw-bold); }
.book-card .sub { margin-top: var(--space-1); font-size: var(--fs-small); color: var(--color-text-muted); font-weight: var(--fw-semibold); }
.book-card p.body { margin-top: var(--space-3); font-size: var(--fs-body); line-height: 1.7; }
.book-card p.note { margin-top: var(--space-2); font-size: var(--fs-caption); color: var(--color-text-muted); }
.info-table { margin-top: var(--space-4); width: 100%; border-collapse: collapse; font-size: var(--fs-small); background: var(--color-bg-surface); border: 1px solid var(--color-border-input); }
.info-table th, .info-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.info-table th { width: 5.5em; background: var(--color-bg-table-head); font-weight: var(--fw-bold); white-space: nowrap; }
.info-table tr:last-child th, .info-table tr:last-child td { border-bottom: 0; }
@media (min-width: 768px) { .book-card { grid-template-columns: 240px minmax(0, 1fr); column-gap: var(--space-6); } .cover-slot { width: 100%; max-width: none; } }
.notice-list { margin-top: var(--space-3); background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.notice-list li + li { border-top: 1px solid var(--color-border); }
.notice-list a { display: grid; gap: 2px; min-height: 56px; padding: var(--space-3) var(--space-4); color: var(--color-text-primary); text-decoration: none; }
.notice-list a:hover { background: var(--color-bg-nav-hover); }
.notice-list a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.notice-list b { font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: 1.5; }
.notice-list time { font-size: var(--fs-small); color: var(--color-text-muted); }
.more-link { margin-top: var(--space-2); display: inline-flex; align-items: center; min-height: var(--touch); color: var(--color-text-link); font-size: var(--fs-small); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; }
.sec p.txt { margin-top: var(--space-3); font-size: var(--fs-body); line-height: 1.7; max-width: 46em; }
.two { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.two .card p { font-size: var(--fs-small); }
@media (min-width: 768px) { .two { grid-template-columns: 1fr 1fr; } }

/* 시안 전용: 요소 이름표 */
.sample-label { font-size: 12px; font-weight: var(--fw-bold); color: #4B5563; }

/* ---------- 상태판, 비교 ---------- */
.sheet { padding: var(--space-6) var(--space-5) var(--space-7); background: #fff; }
.sheet h1 { font-size: 22px; }
.sheet > h2 { margin-top: var(--space-6); font-size: 17px; padding-top: var(--space-3); border-top: 1px dashed #9CA3AF; }
.sheet .grid { margin-top: var(--space-3); display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-4); align-items: start; }
.sheet .cell2 { display: grid; gap: var(--space-2); justify-items: start; }
.sheet .cell2 .cap { font-size: 12px; font-weight: var(--fw-bold); color: #4B5563; }
.sheet .wide { grid-column: span 2; }
.sheet .cell2.full { grid-column: 1 / -1; width: 100%; }
.frame { border: 1px dashed #9CA3AF; }

@media (max-width: 340px) { .hd-logo { font-size: 19px; letter-spacing: 0.04em; } .hd-mock { font-size: 13px; } }
@media (max-width: 299px) {
  .hd-row { flex-wrap: wrap; padding-bottom: var(--space-1); }
  .hd-logo { margin-right: 0; }
  .hero h1 { font-size: 26px; }
}

/* 360 미만 휴대폰: 메뉴 단추 글자 숨김(이름은 aria-label), 모의고사 단추 안쪽 여백 줄임 */
@media (max-width: 359px) { .hd-menu .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .hd-mock { padding: 0 8px; } }


/* 큰 단추 두 줄: 휴대폰에서 두 줄로 쌓고 768px 이상은 한 줄 */
.btn-two .l1 { display: block; font-size: 20px; }
.btn-two .l2 { display: block; font-size: 16px; font-weight: var(--fw-semibold); }
.hero .btn-two { min-height: 76px; }
@media (min-width: 768px) { .btn-two .l1, .btn-two .l2 { display: inline; font-size: inherit; } .hero .btn-two { min-height: 64px; } }
@media (min-width: 960px) { .hd-row > .hd-icon:not(.hd-menu) { order: 2; } .hd-mock { order: 3; } }

.mock-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--mock-card-accent); }





.btn-two { flex-direction: column; gap: 2px; }
@media (min-width: 768px) { .btn-two { flex-direction: row; gap: 0.3em; } }



.card-h { font-size: 18px; font-weight: var(--fw-bold); line-height: var(--lh-tight); margin-bottom: var(--space-2); }

.prose td.nw { white-space: nowrap; }

.prose th, .prose td { min-width: 5.6em; }



/* ================= 2차 묶음 부품 ================= */
/* 검색 입력 */
.search-form { display: grid; gap: var(--space-2); }
.field { position: relative; display: flex; align-items: center; }
.field > svg { position: absolute; left: 12px; color: var(--color-text-muted); pointer-events: none; }
.field input { width: 100%; min-height: 48px; padding: 0 44px 0 40px; font: inherit; font-size: var(--fs-body); color: var(--color-text-primary); background: var(--color-bg-surface); border: 2px solid var(--color-border-input); border-radius: var(--radius-md); }
.field input::placeholder { color: var(--color-text-muted); opacity: 1; }
.field input:hover, .field input.is-hover { border-color: var(--color-primary); }
.field input:focus, .field input.is-focus { outline: var(--focus-width) solid var(--color-border-focus); outline-offset: var(--focus-offset); border-color: var(--color-primary); }
.field input[disabled], .field input.is-disabled { background: var(--color-bg-subtle); border-style: dashed; border-color: var(--color-border); color: var(--color-text-disabled); }
.field input.is-error { border-color: var(--color-error); }
.field .clear { position: absolute; right: 2px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--color-text-secondary); border-radius: var(--radius-md); cursor: pointer; }
.field .clear:hover { background: var(--color-bg-nav-hover); }
.hint { font-size: var(--fs-caption); color: var(--color-text-muted); }
.search-row { display: grid; gap: var(--space-2); }
@media (min-width: 768px) { .search-row { grid-template-columns: minmax(0, 1fr) auto; } .search-row .btn { min-height: 48px; } }

/* 영역 칩(가로 스크롤, 막대 보임) */
.chip-row { margin-top: var(--space-3); display: flex; gap: var(--space-2); overflow-x: auto; padding: 4px 2px var(--space-2); scrollbar-width: auto; }
.chip-row:focus-visible { outline: var(--focus-width) solid var(--color-border-focus); outline-offset: 2px; }
.chip { flex: none; display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 var(--space-4); border-radius: 999px; border: 2px solid var(--color-border-input); background: var(--color-bg-surface); color: var(--color-text-secondary); font-size: var(--fs-small); font-weight: var(--fw-semibold); text-decoration: none; white-space: nowrap; cursor: pointer; }
.chip:hover, .chip.is-hover { border-color: var(--color-primary); background: var(--color-bg-nav-hover); text-decoration: underline; text-underline-offset: 3px; }
.chip:active, .chip.is-active { background: var(--color-bg-nav-active); }
.chip.is-focus, .chip:focus-visible { outline: var(--focus-width) solid var(--color-border-focus); outline-offset: var(--focus-offset); }
.chip[aria-pressed="true"], .chip.is-selected { background: var(--color-primary); border-color: var(--color-primary); color: #fff; text-decoration: none; }
.chip.is-disabled { border-style: dashed; border-color: var(--color-border); color: var(--color-text-disabled); background: var(--color-bg-subtle); cursor: not-allowed; text-decoration: none; }

/* 검색 결과 */
.result-count { margin-top: var(--space-3); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.result-list { margin-top: var(--space-3); border-top: 1px solid var(--color-border-input); background: var(--color-bg-surface); }
.result-list > li { border-bottom: 1px solid var(--color-border); }
.result { display: grid; gap: 4px; padding: var(--space-3) var(--space-1); min-height: 56px; color: var(--color-text-primary); text-decoration: none; }
.result b { font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: 1.5; color: var(--color-text-link); text-decoration: underline; text-underline-offset: 3px; }
.result .meta { display: flex; flex-wrap: wrap; gap: 4px var(--space-2); align-items: center; font-size: var(--fs-caption); color: var(--color-text-muted); }
.result p { font-size: var(--fs-small); color: var(--color-text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.result mark { background: var(--color-warning-bg); color: var(--color-warning-strong); padding: 0 2px; border-radius: 2px; }
.result:hover, .result.is-hover { background: var(--color-bg-nav-hover); }
.empty-note { margin-top: var(--space-3); padding: var(--space-4); border: 1px dashed var(--color-border-input); border-radius: var(--radius-md); background: var(--color-bg-surface); font-size: var(--fs-body); }
.empty-note .btn { margin-top: var(--space-3); }
.state-sep { margin-top: var(--space-6); padding-top: var(--space-3); border-top: 2px dashed #9CA3AF; font-size: 12px; font-weight: var(--fw-bold); color: #4B5563; }
.skeleton { margin-top: var(--space-3); display: grid; gap: var(--space-3); }
.skeleton i { display: block; height: 64px; border-radius: var(--radius-md); background: var(--color-bg-subtle); border: 1px solid var(--color-border); }

/* 접고 펴는 묶음 */
.fold-list { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.fold { background: var(--color-bg-surface); border: 1px solid var(--color-border-input); border-radius: var(--radius-md); }
.fold > summary { display: flex; align-items: center; gap: var(--space-2); min-height: 52px; padding: 0 var(--space-4); list-style: none; cursor: pointer; font-size: var(--fs-body); font-weight: var(--fw-bold); border-radius: var(--radius-md); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary .cnt { margin-left: auto; font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--color-text-muted); }
.fold > summary .chev { flex: none; color: var(--color-text-secondary); }
.fold > summary .ic-fold { display: none; }
.fold[open] > summary .ic-fold { display: block; }
.fold[open] > summary .ic-unfold { display: none; }
.fold[open] > summary { border-bottom: 1px solid var(--color-border); border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--color-bg-table-head); }
.fold > summary:hover, .fold > summary.is-hover { background: var(--color-bg-nav-hover); text-decoration: underline; text-underline-offset: 4px; }
.fold > summary:active, .fold > summary.is-active { background: var(--color-bg-nav-active); }
.fold > summary:focus-visible, .fold > summary.is-focus { outline: var(--focus-width) solid var(--color-border-focus); outline-offset: -3px; }
.fold-body li + li { border-top: 1px solid var(--color-border); }
.fold-body a { display: flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: var(--space-2) var(--space-4); color: var(--color-text-primary); text-decoration: none; font-size: var(--fs-small); }
.fold-body a span.cnt { margin-left: auto; flex: none; color: var(--color-text-muted); font-size: var(--fs-caption); }
.fold-body a:hover, .fold-body a.is-hover { background: var(--color-bg-nav-hover); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) { .fold-list { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }

/* 옛 기록물 카드, 컨설팅 유형 카드, 6대 서비스, 책 카드 */
.link-card { display: grid; gap: var(--space-1); padding: var(--space-4); min-height: 56px; background: var(--color-bg-surface); border: 1px solid var(--color-border-input); border-radius: var(--radius-lg); color: var(--color-text-primary); text-decoration: none; }
.link-card h3 { font-size: 17px; font-weight: var(--fw-bold); line-height: 1.4; }
.link-card p { font-size: var(--fs-small); color: var(--color-text-secondary); }
.link-card .go { margin-top: var(--space-1); display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-text-link); text-decoration: underline; text-underline-offset: 3px; }
.link-card:hover, .link-card.is-hover { border-color: var(--color-primary); background: var(--color-bg-nav-hover); box-shadow: var(--shadow-1); }
.link-card:hover h3, .link-card.is-hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.link-card:active, .link-card.is-active { background: var(--color-bg-nav-active); box-shadow: inset 0 2px 0 rgba(0,0,0,0.12); }
.link-card.is-focus, .link-card:focus-visible { outline: var(--focus-width) solid var(--color-border-focus); outline-offset: var(--focus-offset); }
.link-card.is-disabled { border-style: dashed; border-color: var(--color-border); background: var(--color-bg-subtle); color: var(--color-text-disabled); }
.link-card.is-disabled p, .link-card.is-disabled h3, .link-card.is-disabled .go { color: var(--color-text-disabled); text-decoration: none; }
.card-grid { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
@media (min-width: 768px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .card-grid.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-card { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); background: var(--color-bg-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: var(--radius-md); }
.svc-card b { font-size: var(--fs-body); font-weight: var(--fw-bold); }
.svc-card span { font-size: var(--fs-small); color: var(--color-text-secondary); }
.svc-card .new { display: inline-block; width: fit-content; font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--color-text-secondary); }
.contact-box { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.contact-box .btn { width: 100%; }
@media (min-width: 768px) { .contact-box { grid-template-columns: repeat(2, minmax(0, 280px)); } }
.slot-box { margin-top: var(--space-4); padding: var(--space-4); border: 1px dashed var(--color-border-input); border-radius: var(--radius-md); background: var(--color-bg-surface); font-size: var(--fs-small); color: var(--color-text-muted); }
.lead { margin-top: var(--space-3); font-size: var(--fs-body); line-height: 1.7; max-width: 46em; }
.type-nav { margin-top: var(--space-6); display: grid; gap: var(--space-3); }
@media (min-width: 768px) { .type-nav { grid-template-columns: 1fr 1fr; } }
.book-main { margin-top: var(--space-4); }
.list-plain { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.facts-list { margin-top: var(--space-3); display: grid; gap: var(--space-3); }
.facts-list li { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-2); font-size: var(--fs-small); line-height: 1.6; }
.facts-list svg { margin-top: 3px; color: var(--color-accent); }
.small-note { margin-top: var(--space-3); font-size: var(--fs-caption); color: var(--color-text-muted); }

/* 블로그 카드, 한 줄 목록, 영역 첫 화면 */
.blog-card { display: grid; gap: 6px; padding: var(--space-4); background: var(--color-bg-surface); border: 1px solid var(--color-border-input); border-radius: var(--radius-lg); color: var(--color-text-primary); text-decoration: none; }
.blog-card b { font-size: 17px; font-weight: var(--fw-bold); line-height: 1.45; }
.blog-card p { font-size: var(--fs-small); color: var(--color-text-secondary); }
.blog-card .meta { display: flex; flex-wrap: wrap; gap: 4px var(--space-2); align-items: center; font-size: var(--fs-caption); color: var(--color-text-muted); }
.blog-card:hover { border-color: var(--color-primary); background: var(--color-bg-nav-hover); }
.board-list { margin-top: var(--space-3); border-top: 1px solid var(--color-border-input); background: var(--color-bg-surface); }
.board-list li { border-bottom: 1px solid var(--color-border); }
.board-list a { display: flex; align-items: center; gap: var(--space-2); min-height: 56px; padding: 0 var(--space-4); color: var(--color-text-primary); text-decoration: none; font-size: var(--fs-body); font-weight: var(--fw-medium); }
.board-list li:first-child a { font-weight: var(--fw-bold); min-height: 64px; }
.board-list a .cnt { margin-left: auto; flex: none; font-size: var(--fs-small); color: var(--color-text-muted); }
.board-list a:hover { background: var(--color-bg-nav-hover); text-decoration: underline; text-underline-offset: 3px; }
.recent-list { margin-top: var(--space-3); display: grid; }
.recent-list li { border-bottom: 1px solid var(--color-border); }
.recent-list a { display: grid; gap: 4px; padding: var(--space-3) 0; min-height: 56px; color: var(--color-text-primary); text-decoration: none; }
.recent-list b { font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: 1.5; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-border-input); }
.recent-list .meta { display: flex; flex-wrap: wrap; gap: 4px var(--space-2); align-items: center; font-size: var(--fs-caption); color: var(--color-text-muted); }
@media (min-width: 1024px) { .area-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; } }

/* 안내 쪽(404, 410) */
.err-wrap { max-width: 560px; margin: 0 auto; }
.err-wrap .actions { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.err-wrap .actions .btn { width: 100%; }
.err-code { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--color-text-muted); letter-spacing: 0.04em; }

/* 개인정보처리방침(긴 글) */
.toc { margin-top: var(--space-4); padding: var(--space-4); background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.toc h2 { font-size: var(--fs-body); font-weight: var(--fw-bold); }
.toc ol { margin-top: var(--space-2); list-style: decimal; padding-left: 1.4em; display: grid; }
.toc a { min-width: var(--touch); display: inline-flex; align-items: center; min-height: var(--touch); color: var(--color-text-link); text-decoration: underline; text-underline-offset: 3px; font-size: var(--fs-small); }
.reading { max-width: var(--reading-max); }
@media (min-width: 1024px) { .layout-priv > article { grid-column: 1; grid-row: 1; } .layout-priv { display: grid; grid-template-columns: minmax(0, 1fr) var(--side-w); column-gap: 40px; align-items: start; } .layout-priv .toc { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + 16px); order: 2; margin-top: 0; } }

/* 시안 전용: 한 장 안의 상태 나눔 */
.sheet2 { padding: var(--space-5) var(--page-pad) var(--space-6); background: #fff; }

.btn-two { padding-top: 12px; padding-bottom: 12px; }

/* ================= 개발 쪽 덧붙임 (대표 결정 10-03과 사이트 실제 글에 맞춘 것) ================= */
.hero .lead{max-width:36em;font-size:17px}
.hero-kicker{font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--color-text-inverse-muted)}
.skip:focus{top:8px}
a.skip{text-decoration:underline}
/* 대표 결정 ③: 옛 글 em은 기울이지 않고 강조색만 */
.prose em{font-style:normal;color:var(--color-accent)}
/* 옛 글 그림은 크기가 제각각(작은 gif 단추 등)이라 늘리지 않는다. 큰 그림만 본문 폭에 맞춘다 */
.prose img{display:inline-block;width:auto;max-width:100%;height:auto;border:0;border-radius:0;background:transparent;vertical-align:middle}
.prose > img,.prose > p > img:only-child{display:block;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-surface)}
.prose table table{min-width:0}
.prose table[width]{width:auto !important}
.prose .table-wrap table{margin:0}
.prose .table-wrap + .table-hint{margin-top:var(--space-1)}
.prose .table-hint{margin-bottom:var(--space-1)}
.prose p,.prose li,.prose td,.prose th{overflow-wrap:break-word}
.prose td,.prose th{overflow-wrap:normal}
/* 긴 줄 끊기: 띄어쓰기 없는 주소, ===== 줄 */
.prose p,.prose li,.prose h2,.prose h3,.prose h4,.prose blockquote{overflow-wrap:anywhere;word-break:keep-all}
.prose{min-width:0}
/* 자바스크립트 없을 때의 메뉴: 머리 안에 펼쳐서 보인다 */
html:not(.js) .site-header{position:static}
html:not(.js) .hd-menu{display:none}
html:not(.js) .menu-panel{position:static;box-shadow:none}
html.js .menu-panel[hidden],html.js .scrim-page[hidden]{display:none}
.hd-menu .ic-close{display:none}
.hd-menu[aria-expanded="true"] .ic-close{display:block}
.hd-menu[aria-expanded="true"] .ic-menu{display:none}
@media(min-width:960px){.menu-panel,.scrim-page{display:none !important}}
/* 대표 결정 ②: 글 보기 옆 칸은 모의고사 카드만 따라온다 */
@media(min-width:1024px){
  .layout-post > .side-col{align-self:stretch}
  .side-col .mock-card.is-side{position:sticky;top:calc(var(--header-h) + var(--space-4));z-index:2}
}
.post-title-h{margin-top:var(--space-2);font-size:var(--fs-h1);line-height:var(--lh-tight);font-weight:var(--fw-bold);letter-spacing:-.01em}
@media(min-width:1024px){.post-title-h{font-size:32px}}
.crumb-row{display:flex;flex-wrap:wrap;gap:0 var(--space-4)}
.board-eyebrow{margin-top:var(--space-2)}
.mt-3{margin-top:var(--space-3)}.mt-4{margin-top:var(--space-4)}.mt-5{margin-top:var(--space-5)}.mt-6{margin-top:var(--space-6)}
.stack-mt > * + *{margin-top:var(--space-4)}
.post-section{margin-top:var(--space-6)}
.post-section:first-child{margin-top:0}
.back-btn{margin-top:var(--space-4);display:flex}
.back-btn .btn{width:100%}
.mock-card.is-below{margin-top:var(--space-6)}
.mock-card .mc-text{display:grid;gap:var(--space-1)}
.btn-xl{white-space:normal}
.hero .cta .btn-xl{white-space:normal}
.page-lead{margin-top:var(--space-3);font-size:var(--fs-body);line-height:1.7;max-width:46em}
.post-stale{margin-top:var(--space-4)}
.alert a{color:var(--color-text-link)}
.pager .pg-m .btn[aria-disabled="true"]{pointer-events:none}
.pg-d li{list-style:none}
.hit-count{margin-top:var(--space-3)}
.fold-list + .section-title{margin-top:var(--space-6)}
.chip-row button.chip{font-family:inherit}
.err-wrap{padding-top:var(--space-5)}
.err-wrap .page-title{margin-top:var(--space-2)}
.err-wrap .lead{margin-top:var(--space-3)}
.err-wrap .search-form{margin-top:var(--space-5)}
.err-wrap .card-grid{margin-top:var(--space-4)}
.err-wrap h2{margin-top:var(--space-6);font-size:var(--fs-h2)}
.toc-wrap{margin-top:var(--space-4)}
.nowrap-js{white-space:nowrap}
.blog-grid{margin-top:var(--space-4);display:grid;gap:var(--space-3)}
@media(min-width:768px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.blog-card[hidden]{display:none}
.main-sec{margin-top:var(--space-5)}

html:not(.js) .menu-panel[hidden]{display:block}
.main{padding-top:var(--space-5)}
.main-wide{padding-top:0}
.foot-name{margin-top:0}
.foot-contact a{margin-right:0}
.foot-copy{margin-top:var(--space-1)}

.hero .alert{color:var(--color-text-primary);margin-top:var(--space-4)}
.post-wrap{margin:var(--space-4) calc(-1 * var(--page-pad)) 0}
.post-wrap .post-list{margin-top:0}
@media(min-width:768px){
  .post-wrap{margin:var(--space-4) 0 0;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;background:var(--color-bg-surface)}
  .post-wrap .post-list{border:0;border-radius:0}
  .post-wrap .post-list > li:last-child{border-bottom:0}
  .pg-end{display:none}
}
.post-item .tag{vertical-align:1px}
.post-title .tag + .tag{margin-left:0}

/* sticky가 옆 칸 전체 높이 안에서 움직이게 옆 칸을 격자가 아닌 블록으로 둔다 */
@media(min-width:1024px){
  .layout-post > .side-col{display:block}
  .side-col .side-box{margin-top:var(--space-5)}
  .fold > summary{pointer-events:none}
  .fold > summary .chev{display:none}
  .fold::details-content{content-visibility:visible;display:block;height:auto}
}

.list-plain a{display:inline-flex;align-items:center;min-height:var(--touch)}
html:not(.js) .js-only{display:none}
.search-form .search-row{margin-top:0}
.link-card .go{display:none}
.card-grid .link-card:has(.go) .go{display:inline-flex}

.alert[hidden],.field .clear[hidden],.btn[hidden]{display:none}
/* 옆 칸(280px) 카드 단추는 폭과 상관없이 두 줄로 쌓는다 */
.mock-card.is-side .btn-two{flex-direction:column;gap:2px}
.mock-card.is-side .btn-two .l1,.mock-card.is-side .btn-two .l2{display:block;font-size:inherit}
.mock-card.is-side .btn-two .l1{font-size:16px}
/* 디자인팀 10-03 R9: 댓글이 없는 게시판은 댓글 칸 숨김 */
@media (min-width: 768px) { .no-cmt .post-head, .no-cmt .post-item { grid-template-columns: minmax(0, 1fr) 104px 104px; } .no-cmt .post-head > span:last-child { display: none; } }
.cover-img img { display: block; width: 56%; max-width: 220px; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-1); }
@media (min-width: 768px) { .cover-img img { width: 100%; max-width: 240px; } }
.book-mini { grid-template-columns: 72px minmax(0, 1fr); align-items: center; column-gap: var(--space-4); }
.book-mini img { display: block; width: 72px; height: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-1); }
/* 디자인팀 10-03: 책 카드 표지는 오른쪽 위에 두어 세 카드 제목 줄을 같은 높이로 */
.path-card.has-cover { position: relative; padding-right: 112px; }
.path-card.has-cover .btn { margin-right: -88px; }
.path-card .home-cover { position: absolute; top: var(--space-5); right: var(--space-5); }
.home-cover img { display: block; width: 72px; height: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-1); }
/* 대표 결정(10-03): 로고는 시안 A(대문자 22px, 글자 사이 0.06em), 메뉴는 시안 C(17px, 조금 굵게) */
.caps { text-transform: uppercase; letter-spacing: 0.04em; }
.book-mini.is-plain { cursor: default; }  /* 링크 없는 책도 같은 상자(대표 의견 10-03) */
.book-mini p { margin-top: var(--space-1); }
.book-mini .more { color: var(--color-text-link); font-weight: var(--fw-medium); }
a.book-mini:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) { .pg-m.pg-always { display: grid; max-width: 480px; margin: 0 auto; } }
/* PM 채용 소식(10-03) */
.job-list .meta span + span::before { content: ""; }
.job-list .meta { flex-wrap: wrap; gap: var(--space-2); }
.job-list .job-sum, .job-list .job-intro { display: block; margin-top: var(--space-1); font-size: var(--fs-small); color: var(--color-text-secondary); }
.job-list .more { display: block; margin-top: var(--space-1); color: var(--color-text-link); font-size: var(--fs-small); font-weight: var(--fw-medium); }
/* PM 채용 소식 옆 상자(대표 의견 10-03): 정보 상자로 작게. 1024px 이상에서 세 번째 칸, 그 아래는 목록 밑으로 */
.jobs-box { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; }
.jobs-box .more-link { margin-top: auto; }
.jobs-h { font-size: var(--fs-body); font-weight: var(--fw-bold); margin-bottom: var(--space-2); }
.jobs-box ul { list-style: none; padding: 0; margin: 0; }
.jobs-box li + li { border-top: 1px solid var(--color-border); }
.jobs-box li a { display: grid; gap: 2px; padding: var(--space-2) 0; color: var(--color-text-primary); text-decoration: none; }
.jobs-box li a b { font-size: var(--fs-small); font-weight: var(--fw-semibold); line-height: 1.45; color: var(--color-text-link); text-decoration: underline; text-underline-offset: 3px; }
.jobs-box li a span { font-size: 13px; color: var(--color-text-secondary); }
.jobs-box .jobs-chk { color: var(--color-text-muted); }
.jobs-note { font-size: 13px; color: var(--color-text-muted); margin-top: var(--space-2); }
@media (min-width: 1024px) { .two.has-jobs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 260px; } .two.has-jobs .jobs-box { margin-bottom: calc(-1 * var(--space-4)); } } /* 상자 아래 여백만큼 내려 "채용 소식 더 보기"를 "보관함 보기" 줄에 맞춤(대표 의견 10-03) */
@media (min-width: 768px) and (max-width: 1023px) { .two.has-jobs .jobs-box { grid-column: 1 / -1; } }
.job-co { margin-top: var(--space-3); padding: var(--space-4); background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.job-co-name { font-size: 20px; font-weight: var(--fw-bold); }
.job-co-intro { font-size: var(--fs-small); color: var(--color-text-secondary); margin-top: var(--space-1); }
.job-co .job-list { margin-top: var(--space-2); }
.job-co .more-link { display: inline-block; margin-top: var(--space-3); }
.job-plain b { font-weight: var(--fw-semibold); }
/* 컨설팅 그림(디자인팀 10-03). 그림 바탕은 #EEF2F8 네모라 모서리는 여기서 둥글게 */
.link-card.has-art { grid-template-columns: minmax(0, 1fr); }
.card-art { display: block; width: 100%; max-width: 100%; min-width: 0; object-fit: cover; height: auto; aspect-ratio: 4 / 3; border-radius: var(--radius-md); margin-bottom: var(--space-2); }
.art-type { display: block; width: 100%; max-width: 480px; height: auto; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); margin: var(--space-4) 0; }
/* 교육 연결(마케팅세일즈팀 요청 10-03): 글 끝 옅은 칸 한 줄 */
.edu-line { margin-top: var(--space-6); padding: var(--space-3) var(--space-4); background: var(--color-accent-subtle); border-radius: var(--radius-md); font-size: var(--fs-small); color: var(--color-text-secondary); }
.edu-line a { font-weight: var(--fw-semibold); white-space: nowrap; }
/* 교육 안내 쪽 사이트 화면 띠(대표 10-03) */
.site-shot { display: block; width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); margin: var(--space-2) 0 var(--space-3); }
.path-card > picture { display: block; }
/* 공개 세미나(마케팅세일즈팀 요청 10-03) */
.topic-list { list-style: disc; margin: 0; padding-left: 1.4em; display: grid; gap: var(--space-2); }
.seminar-next { display: grid; gap: var(--space-3); }
.seminar-next .btn { justify-self: start; }
.seminar-info { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); margin: 0; }
.seminar-info dt { font-weight: var(--fw-semibold); color: var(--color-text-secondary); }
.seminar-info dd { margin: 0; }
.seminar-hero { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); margin: var(--space-4) 0 var(--space-2); }
main picture:has(> .seminar-hero) { display: block; }
.seminar-card > div { display: grid; gap: var(--space-3); align-content: start; }
.seminar-card > div .btn { justify-self: start; }
@media (min-width: 768px) { .seminar-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-5); align-items: center; } .seminar-card .site-shot { margin: 0; } }
/* 행사(대표 10-03, PMI 행사 쪽 구성) */
.ev-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-2); }
.ev-next { display: grid; gap: var(--space-4); }
.ev-next img { width: 100%; height: auto; border-radius: var(--radius-md); }
.ev-next .meta, .ev-past .meta { display: block; font-size: var(--fs-small); color: var(--color-text-muted); }
.ev-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-4) 0 0; }
@media (min-width: 768px) { .ev-next.has-img { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; } }
.ev-past { list-style: none; margin: 0; padding: 0; display: grid; }
.ev-past li { display: grid; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.ev-past img { width: 100%; max-width: 320px; height: auto; border-radius: var(--radius-md); }
@media (min-width: 768px) { .ev-past li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 200px; align-items: start; } }
.ev-hero-img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); margin: var(--space-3) 0 var(--space-4); }
main picture:has(> .ev-hero-img) { display: block; }
.ev-top { margin-top: var(--space-4); }
.ev-kicker { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--color-accent); margin: 0 0 var(--space-2); }
.ev-title { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-tight); margin: 0 0 var(--space-2); }
.ev-more { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.ev-more .meta { display: block; font-size: var(--fs-small); color: var(--color-text-muted); }
.ev-jump { display: flex; gap: var(--space-2); overflow-x: auto; margin: var(--space-5) 0 0; padding-bottom: var(--space-1); border-bottom: 1px solid var(--color-border); }
.ev-jump a { flex: none; display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 var(--space-3); font-weight: var(--fw-semibold); color: var(--color-text-primary); text-decoration: none; white-space: nowrap; }
.ev-jump a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ev-band { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }
.tag-ev-format { background: var(--color-accent-subtle); border-color: transparent; }
.tag-ev-topic { background: var(--color-bg-subtle); border-color: transparent; }
:target { scroll-margin-top: 72px; }
.ev-body h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); margin: var(--space-5) 0 var(--space-2); }
.ev-body ul { padding-left: 1.3em; list-style: disc; display: grid; gap: var(--space-1); }
.ev-body p { margin: 0 0 var(--space-3); }
.ev-body ul { margin: 0 0 var(--space-3); }
.ev-body ol { padding-left: 1.6em; list-style: decimal; display: grid; gap: var(--space-1); margin: 0 0 var(--space-3); }
/* 신청 링크 전 안내: 강조색과 다투지 않게 차분한 꼬리표(대표 10-03 '강조 문구 조정') */
.ev-soon { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-3); border-radius: 999px; background: var(--color-bg-subtle); color: var(--color-text-secondary); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.ev-next .meta { margin: 0 0 var(--space-2); }
.ev-next .ev-tags { margin-bottom: var(--space-3); }
.ev-next p:not(.ev-kicker):not(.meta):not(.ev-tags):not(.ev-actions) { margin: 0; }
/* 행사 하나의 쪽 줄맞춤(대표 10-03) */
.ev-page .ev-tags { margin: var(--space-3) 0 var(--space-2); }
.ev-page .page-title { margin-bottom: var(--space-4); }
.ev-page .seminar-info { padding: var(--space-4) var(--space-5); background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.ev-page .ev-apply { margin: var(--space-4) 0 var(--space-5); }
.ev-page .ev-body { max-width: none; }
/* 첫 화면 공지 띠(대표 10-03: 낮게) */
.notice-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin-top: var(--space-6); padding: var(--space-3) var(--space-4); background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.notice-bar-tag { flex: none; }
.notice-bar-link { flex: 1 1 auto; min-width: 0; font-weight: var(--fw-semibold); color: var(--color-text-primary); }
.notice-bar-date { flex: none; font-size: var(--fs-small); color: var(--color-text-muted); }
.notice-bar-more { flex: none; font-size: var(--fs-small); font-weight: var(--fw-semibold); }
@media (min-width: 768px) { .notice-bar { flex-wrap: nowrap; } .notice-bar-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
/* 첫 화면: 공지 띠 다음 상자를 위로(대표 10-03 간격 조정) */
.notice-bar + .sec { padding-top: var(--space-5); }