/* 학교를 떠난 뒤, 대학까지 (road.php) — 2026-09-17
   단계 상자를 눌러 아래로 펼친다. 색·글꼴은 gj.css 토큰. */
.rd{
  --r:14px; --r2:10px; --r3:7px;
  --bd:#dfe6ee; --bd2:#eef2f6; --soft:#f8fafc;
  --sh:0 1px 2px rgba(16,24,40,.04);
  --shO:0 6px 20px rgba(8,145,178,.10);
}
.rd-main{padding-bottom:5rem}
.rd-guide{display:flex;align-items:center;gap:.4375rem;font-size:.875rem;color:var(--mut);margin:0 .25rem 1rem}
.rd-guide i{color:var(--brand);font-size:1rem}

/* ── 단계 상자 ── */
.rd-steps{display:grid;gap:.75rem}
.rd-item{background:#fff;border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh);transition:border-color .18s,box-shadow .18s}
.rd-item:hover{border-color:#c3d2df}
.rd-item.on{border-color:var(--brand);box-shadow:var(--shO)}

.rd-bar{display:flex;align-items:center;gap:1rem;width:100%;padding:1.375rem 1.5rem;background:none;border:0;
  font-family:inherit;cursor:pointer;text-align:left;color:inherit}
.rd-bar .no{flex:0 0 auto;width:2.625rem;height:2.625rem;border-radius:var(--r2);background:var(--soft);
  border:1px solid var(--bd);color:var(--mut);font-size:1.125rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;transition:.18s;letter-spacing:-.5px}
.rd-item.on .rd-bar .no{background:var(--brand);border-color:var(--brand);color:#fff}
.rd-bar .tx{flex:1;min-width:0}
.rd-bar .tx b{display:block;font-size:1.1875rem;font-weight:800;letter-spacing:-.4px;line-height:1.4}
.rd-bar .tx small{display:block;font-size:.875rem;color:var(--mut);margin-top:.1875rem;line-height:1.5}
/* 단계 배지(준비·시험·성적·지원·마무리) — 단정하게 (2026-09-19 사용자 지시): 둥근 알약 → 모서리 4px 네모, 다섯 개 같은 폭·가운데 정렬, 흰 바탕에 청록 테두리·글씨. 펼친 단계는 청록으로 채움 */
.rd-bar .tag{flex:0 0 auto;min-width:4.5rem;text-align:center;font-size:.8125rem;font-weight:600;line-height:1.2;letter-spacing:.02em;
  padding:.375rem .625rem;border-radius:4px;background:#fff;color:var(--brand-d);border:1px solid var(--brand);transition:.18s}
.rd-item.on .rd-bar .tag{background:var(--brand);color:#fff;border-color:var(--brand)}
.rd-bar .ar{flex:0 0 auto;color:#a8b5c2;font-size:1.0625rem;transition:transform .22s}
.rd-item.on .rd-bar .ar{transform:rotate(180deg);color:var(--brand)}
.rd-bar:hover .tx b{color:var(--brand-d)}

/* 펼침 */
.rd-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s cubic-bezier(.4,0,.2,1)}
.rd-item.on .rd-panel{grid-template-rows:1fr}
/* 닫을 때 글이 왼쪽으로 밀리며 잘리던 것 고침 (2026-09-19 사용자 지시): 좌우 여백은 열림·닫힘과 상관없이 늘 두고, 위아래 여백과 윗줄만 접히는 속도에 맞춰 함께 줄인다.
   윗줄은 border 대신 안쪽 그림자(자리를 차지하지 않아 닫힌 상자 높이가 1px 도 안 늘어남) */
.rd-panel>.rd-inner{overflow:hidden;min-height:0;padding:0 1.5rem 0 5.625rem;box-shadow:inset 0 1px 0 transparent;
  transition:padding .28s cubic-bezier(.4,0,.2,1),box-shadow .28s}
.rd-item.on .rd-panel>.rd-inner{padding:1.5rem 1.5rem 1.625rem 5.625rem;box-shadow:inset 0 1px 0 var(--bd2)}
.rd-inner{display:grid;gap:1.125rem}

/* 본문 */
.rd-p{font-size:.9688rem;color:var(--ink2);line-height:1.85;margin:0;max-width:56rem}
.rd-p b{color:var(--ink);font-weight:700}
.rd-p.sm{font-size:.9063rem;margin-top:-.5rem}
.rd-h3{font-size:1.0625rem;font-weight:700;margin:.375rem 0 -.375rem;letter-spacing:-.25px}

/* 숫자 카드 */
.rd-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.75rem}
.rd-fact{background:var(--soft);border:1px solid var(--bd2);border-radius:var(--r2);padding:1.0625rem 1.1875rem}
.rd-fact small{display:block;font-size:.8125rem;color:var(--mut);font-weight:600;margin-bottom:.4375rem}
.rd-fact b{display:block;font-size:1.6875rem;font-weight:800;letter-spacing:-.8px;line-height:1.1;color:var(--brand-d);font-variant-numeric:tabular-nums}
.rd-fact b em{font-style:normal;font-size:.9375rem;font-weight:700;color:var(--mut);margin-left:.1875rem;letter-spacing:0}
.rd-fact span{display:block;font-size:.8125rem;color:var(--ink2);line-height:1.7;margin-top:.5625rem}
.rd-fact.v2 b{color:#7C3AED}
.rd-fact.v3 b{color:var(--voc)}

/* 알림 */
.rd-note{display:flex;gap:.875rem;align-items:flex-start;background:var(--brand-l);border-radius:var(--r2);
  padding:1.125rem 1.25rem;font-size:.9375rem;line-height:1.8;color:var(--brand-d)}
.rd-note i{font-size:1.0625rem;flex:0 0 auto;line-height:1.7;opacity:.85}
.rd-note b{font-weight:700}
.rd-note.rd-warn{background:var(--risk-b);color:var(--risk)}

/* 할 일 */
.rd-todo{background:#fff;border:1px solid var(--bd2);border-radius:var(--r2);padding:.375rem 1.375rem}
.rd-todo ul{margin:0;padding:0;list-style:none}
.rd-todo li{position:relative;font-size:.9375rem;color:var(--ink2);line-height:1.85;padding:.875rem 0 .875rem 1.5rem;border-bottom:1px solid var(--bd2)}
.rd-todo li:last-child{border-bottom:0}
.rd-todo li::before{content:"";position:absolute;left:.125rem;top:1.4375rem;width:.375rem;height:.375rem;border-radius:99px;background:var(--brand)}
.rd-todo li b{color:var(--ink);font-weight:700}

/* 확인 항목 (4) */
.rd-check{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:.625rem}
.rd-ck{background:#fff;border:1px solid var(--bd2);border-top:3px solid var(--me);border-radius:var(--r2);padding:1.0625rem 1.125rem}
.rd-ck.w{border-top-color:var(--risk)} .rd-ck.n{border-top-color:var(--na)}
.rd-ck b{display:block;font-size:1.4375rem;font-weight:800;letter-spacing:-.6px;line-height:1.1;color:var(--me);font-variant-numeric:tabular-nums}
.rd-ck.w b{color:var(--risk)} .rd-ck.n b{color:var(--na)}
.rd-ck b em{font-style:normal;font-size:.875rem;font-weight:700;color:var(--mut);margin-left:.1875rem;letter-spacing:0}
.rd-ck strong{display:block;font-size:.9375rem;font-weight:700;margin:.5rem 0 .3125rem}
.rd-ck span{display:block;font-size:.8125rem;color:var(--ink2);line-height:1.7}

/* 일정 (5) */
.rd-time{background:#fff;border:1px solid var(--bd2);border-radius:var(--r2);padding:.25rem 1.375rem}
.rd-time>div{display:grid;grid-template-columns:7.25rem 1fr;gap:.25rem 1rem;padding:1rem 0;border-bottom:1px solid var(--bd2)}
.rd-time>div:last-child{border-bottom:0}
.rd-time span{grid-row:1;font-size:.875rem;color:var(--mut);font-weight:600}
.rd-time b{grid-column:2;grid-row:1;font-size:.9688rem;font-weight:700}
.rd-time small{grid-column:2;grid-row:2;font-size:.8438rem;color:var(--ink2);line-height:1.6}
@media (max-width:560px){.rd-time>div{grid-template-columns:1fr;gap:.1875rem}.rd-time b,.rd-time small{grid-column:1}.rd-time b{grid-row:2}.rd-time small{grid-row:3}}

/* 이어지는 화면 */
.rd-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.625rem}
.rd-links a{display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--bd);border-radius:var(--r2);
  padding:.9375rem 1.125rem;text-decoration:none;transition:.15s}
.rd-links a:hover{border-color:var(--brand);background:var(--brand-l)}
.rd-links a span{flex:1;min-width:0}
.rd-links a b{display:block;font-size:.9375rem;color:var(--ink);font-weight:700}
.rd-links a small{display:block;font-size:.8125rem;color:var(--mut);margin-top:.125rem}
.rd-links a i{font-size:1.375rem;color:var(--brand);flex:0 0 auto}

.rd-info{background:var(--soft);border:1px solid var(--bd);border-radius:var(--r);padding:1.75rem;margin-top:2rem}
.rd-info h2{font-size:1rem;font-weight:700;margin:0 0 1rem;display:flex;align-items:center;gap:.5rem}
.rd-info h2 i{color:var(--mut)}
.rd-info ul{margin:0;padding-left:1.25rem}
.rd-info li{font-size:.875rem;color:var(--ink2);line-height:1.85;margin-bottom:.5rem}
.rd-info li:last-child{margin-bottom:0}
.rd-info li b{color:var(--ink)}

@media (max-width:680px){
  .rd{--r:12px}
  .rd-main{padding:1rem .875rem 3rem}
  .rd-bar{padding:1rem 1rem;gap:.75rem}
  .rd-bar .no{width:2.25rem;height:2.25rem;font-size:1rem}
  .rd-bar .tx b{font-size:1.0625rem}
  .rd-bar .tx small{font-size:.8125rem}
  .rd-bar .tag{display:none}
  .rd-panel>.rd-inner{padding:0 1rem}.rd-item.on .rd-panel>.rd-inner{padding:1.125rem 1rem 1.25rem}
  .rd-inner{gap:.875rem}
  .rd-p{font-size:.9063rem}
  .rd-fact{padding:.875rem 1rem}.rd-fact b{font-size:1.5rem}
  .rd-note{padding:.9375rem 1rem;font-size:.875rem}
  .rd-todo{padding:.25rem 1rem}.rd-todo li{font-size:.875rem;padding-left:1.25rem}
  .rd-time{padding:.25rem 1rem}
  .rd-info{padding:1.125rem;margin-top:1.5rem}
  /* 좁은 화면에서 낱말 가운데가 잘려 「나옵니 / 다」 처럼 되는 걸 막는다.
     keep-all 만 쓰면 긴 낱말이 넘칠 수 있어 anywhere 를 같이 둔다 */
  .rd-links a b,.rd-links a small,.rd-fact span,.rd-ck span,.rd-faq a,.rd-todo li,.rd-time small{
    word-break:keep-all;overflow-wrap:anywhere}
}

/* ══════════════════════════════════════════════════════════
   guide.php 안에 얹었을 때 — 「길잡이」 절
   road.php 혼자 쓸 때는 아래 규칙이 걸리지 않는다(.gd-road 가 없으므로)
   ══════════════════════════════════════════════════════════ */
.gd-road .rd-steps{margin-top:.25rem}
.gd-road .rd-guide{margin:0 .25rem .875rem}
/* 절 제목 옆 알약을 아이콘으로 */
.gd-road .gd-num{display:inline-flex;align-items:center;gap:.3125rem;font-size:.8125rem;padding:.1875rem .5rem}
.gd-road .gd-num i{font-size:.875rem}

/* 왼쪽 차례 맨 위 — 번호 절과 구분 */
.gd-toc .gd-tocR{background:var(--brand-l);color:var(--brand-d);font-weight:700}
.gd-toc .gd-tocR i{color:var(--brand);font-size:.9375rem}
.gd-toc .gd-tocR.active{background:var(--brand);color:#fff}
.gd-toc .gd-tocR.active i{color:rgba(255,255,255,.85)}
.gd-tocHr{margin:.5rem .375rem;border:0;border-top:1px solid #e2e8f0;opacity:1}
@media (max-width:991.98px){.gd-tocHr{display:none}.gd-toc .gd-tocR{order:-1}}

/* 단계마다 붙는 「자주 묻는 질문」 — 문답 본문은 08 절 한 곳에만 두고 여기서는 건너뛰기만 */
.rd-faq{border:1px solid var(--bd2);border-radius:var(--r2);padding:1.0625rem 1.1875rem;background:#fff}
.rd-faq>b{display:flex;align-items:center;gap:.4375rem;font-size:.9375rem;font-weight:700;margin-bottom:.625rem}
.rd-faq>b i{color:var(--brand);font-size:1rem}
.rd-faq a{display:flex;align-items:center;gap:.5rem;font-size:.9063rem;color:var(--ink2);text-decoration:none;
  padding:.5rem 0;border-top:1px solid var(--bd2);line-height:1.6}
.rd-faq a:hover{color:var(--brand-d)}
.rd-faq a::before{content:"Q";flex:0 0 auto;width:1.125rem;height:1.125rem;border-radius:99px;background:var(--brand-l);
  color:var(--brand-d);font-size:.6875rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.rd-faq a i{margin-left:auto;color:#c3cdd8;font-size:1.125rem}
.rd-faq a:hover i{color:var(--brand)}

/* 08 절 문답 → 그 단계로 되짚어 올라가는 작은 링크 */
.gd-toroad{display:flex;width:fit-content;align-items:center;gap:.3125rem;margin-top:.875rem;font-size:.8125rem;font-weight:600;
  color:var(--brand-d);background:var(--brand-l);border-radius:99px;padding:.375rem .75rem;text-decoration:none}
.gd-toroad:hover{background:#d5edf4;color:var(--brand-d)}
.gd-toroad i{font-size:.875rem;opacity:.7}

/* 길잡이 절 끝 — 「이 안내를 읽으실 때」 (guide.php 안에서는 좁게) */
.rd-info-s{margin-top:1.5rem;padding:1.25rem 1.375rem;border-radius:var(--r2)}
.rd-info-s h2{font-size:.9375rem;margin-bottom:.625rem}
.rd-info-s li{font-size:.8438rem;line-height:1.8;margin-bottom:.3125rem}

/* 08 절에서 되짚어 올라가는 자리 */
.gd-backroad{display:inline-flex;align-items:center;gap:.4375rem;font-size:.875rem;color:var(--brand-d);
  background:var(--brand-l);border:0;border-radius:99px;padding:.4375rem .875rem;margin-top:1rem;
  font-family:inherit;font-weight:600;cursor:pointer}
.gd-backroad:hover{background:#d5edf4}

@media (max-width:680px){
  .rd-faq{padding:.875rem 1rem}
  .rd-faq a{font-size:.875rem}
}

/* ══ 모바일(≤575) 글자 크기 역할별 통일 + 왼쪽 정렬 문장 양끝 정렬 (2026-10-13 사용자 지시 — 대학입결검색기 기준표 방식)
   대제목 20 · 구역 제목 17 · 상자·카드 제목 15 · 본문 14 · 구역 설명·안내문 13 · 표·칩·탭·보조 단추 13 · 배지·주석·꼬리말 12 · 강조 숫자 22 · 그래프 글자 11
   양끝 정렬은 원래 왼쪽 정렬이던 문장만(가운데 정렬은 그대로) — 글자 단위 줄넘김으로 띄어쓰기가 벌어지지 않게 · 홈 대문(제목·부제·단추·인용)은 그대로 */
@media (max-width:575.98px){
  .rd-guide{font-size:13px}
  .rd-bar .tx b{font-size:15px}.rd-bar .tx small{font-size:13px!important}
  .rd-p,.rd-p.sm{font-size:14px}
  .rd-h3{font-size:15px}
  .rd-fact small{font-size:12px!important}.rd-fact b{font-size:22px}.rd-fact b em{font-size:13px}.rd-fact span{font-size:13px}
  .rd-note{font-size:14px}.rd-todo li{font-size:14px}
  .rd-ck b{font-size:22px}.rd-ck b em{font-size:13px}.rd-ck strong{font-size:15px}.rd-ck span{font-size:13px}
  .rd-time span{font-size:13px}.rd-time b{font-size:15px}.rd-time small{font-size:13px!important}
  .rd-links a b{font-size:15px}.rd-links a small{font-size:13px!important}
  .rd-info h2,.rd-info-s h2{font-size:15px}.rd-info li,.rd-info-s li{font-size:13px}
  .rd-faq>b{font-size:15px}.rd-faq a{font-size:14px}
  .gd-road .gd-num{font-size:12px}
  /* 양끝 정렬 */
  .rd-p,.rd-note>div,.rd-todo li,.rd-fact span,.rd-ck span,.rd-time small,.rd-info li{text-align:justify;text-justify:inter-word;word-break:normal;overflow-wrap:anywhere}
}