/* ==========================================================================
   2026 노인일자리 주간 — 서브페이지 컴포넌트
   (식순·세션 타임테이블 / 연사 / 교통안내 / 온라인 참여 카드)
   common.css 의 디자인 토큰을 그대로 사용합니다.
   ========================================================================== */

/* ── 섹션 소제목 ────────────────────────────────────────────────────── */
.h3s{display:flex;align-items:baseline;gap:12px;margin-bottom:24px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.h3s h3{font-size:clamp(19px,2.2vw,24px);font-weight:700;letter-spacing:-.045em;color:var(--ink)}
.h3s span{font-size:14.5px;color:var(--mute)}

/* ── 식순 (초청장 판) ────────────────────────────────────────────────
   공식 초청장에 인쇄된 다섯 항목만 순서대로 보여 줍니다. 시각도 설명도 없어
   항목 수가 적으므로, 번호를 크게 두고 줄 간격을 넉넉히 잡아 허전해 보이지
   않게 했습니다. 분 단위 진행표는 아래 .tt 를 씁니다. */
/* 위 테두리를 두지 않습니다 — 바로 위 .h3s 가 이미 아래 테두리를 갖고 있어
   같이 그리면 선이 두 줄로 보입니다 (.vmap 등 다른 .h3s 뒤 요소와 같은 방식). */
.ord>li{display:flex;align-items:center;gap:20px;padding:22px 6px;border-bottom:1px solid var(--line);transition:background .18s}
.ord>li:hover{background:#FBFDFF}
.ord__n{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--soft);color:var(--brand-d);
  display:grid;place-items:center;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.ord>li>b{font-size:clamp(17px,1.9vw,20px);font-weight:700;letter-spacing:-.04em;color:var(--ink);line-height:1.45}
@media (max-width:760px){
  .ord>li{gap:14px;padding:18px 2px}
  .ord__n{width:32px;height:32px;font-size:14px}
}

/* ── 타임테이블 (분 단위 진행표) ─────────────────────────────────────
   현재 쓰는 화면이 없습니다. 심포지엄 세부 프로그램이 확정되면 다시 씁니다. */
.tt{border-top:2px solid var(--ink)}
.tt__day{display:flex;align-items:center;gap:12px;padding:18px 4px;background:var(--tint);border-bottom:1px solid var(--line)}
.tt__day b{font-size:16px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.tt__day span{font-size:14.5px;color:var(--mute)}
.tt__row{display:grid;grid-template-columns:170px 1fr;gap:24px;padding:20px 4px;border-bottom:1px solid var(--line);align-items:start}
.tt__row:hover{background:#FBFDFF}
.tt__t{font-size:15px;font-weight:700;color:var(--brand-d);font-variant-numeric:tabular-nums;padding-top:2px}
.tt__t small{display:block;margin-top:4px;font-size:12.5px;font-weight:500;color:var(--mute)}
.tt__c b{display:block;font-size:17.5px;font-weight:700;letter-spacing:-.035em;color:var(--ink);line-height:1.45}
.tt__c p{margin-top:7px;font-size:15.5px;line-height:1.7;color:var(--mute)}
.tt__c .who{display:inline-block;margin-top:9px;padding:4px 12px;border-radius:999px;background:var(--soft);
  color:var(--brand-d);font-size:13.5px;font-weight:600}
.tt__row--hi{background:#FBFDFF}
.tt__row--hi .tt__c b{color:var(--brand-d)}
@media (max-width:760px){
  .tt__row{grid-template-columns:1fr;gap:8px;padding:18px 2px}
  .tt__t{font-size:14px}
}

/* ── 연사 카드 ──────────────────────────────────────────────────────── */
.spk{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.spk__c{border:1px solid var(--line);border-radius:18px;padding:26px 24px;background:#fff;transition:.22s}
.spk__c:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:0 12px 28px rgba(30,39,51,.08)}
.spk__c .role{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--soft);
  color:var(--brand-d);font-size:12.5px;font-weight:700;letter-spacing:-.02em}
.spk__c h4{margin-top:14px;font-size:19px;font-weight:700;letter-spacing:-.04em;color:var(--ink)}
.spk__c .org{margin-top:6px;font-size:14.5px;color:var(--mute)}
.spk__c p{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:15px;line-height:1.7;color:var(--body)}
@media (max-width:1080px){.spk{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.spk{grid-template-columns:1fr}}

/* ── 교통 안내 ──────────────────────────────────────────────────────── */
.way{display:flex;flex-direction:column;gap:0;border-top:2px solid var(--ink)}
.way__r{display:grid;grid-template-columns:150px 1fr;gap:22px;padding:22px 4px;border-bottom:1px solid var(--line);align-items:start}
.way__k{display:flex;align-items:center;gap:9px;font-size:15.5px;font-weight:700;color:var(--ink)}
.way__k .ic{width:34px;height:34px;border-radius:10px;background:var(--soft);display:grid;place-items:center;font-size:16px;flex:none}
.way__v{font-size:15.5px;line-height:1.8;color:var(--body);padding-top:5px}
.way__v b{color:var(--ink);font-weight:700}
.way__v .ln{display:inline-block;min-width:22px;height:22px;padding:0 7px;border-radius:11px;color:#fff;
  font-size:12.5px;font-weight:700;text-align:center;line-height:22px;margin-right:5px}
.ln--1{background:#0052A4}.ln--2{background:#00A84D}.ln--5{background:#996CAC}
.ln--bus-b{background:#3D5BAB}.ln--bus-g{background:#33A23D}.ln--bus-r{background:#E60012}
@media (max-width:760px){.way__r{grid-template-columns:1fr;gap:10px}}

/* ── 편의시설 ───────────────────────────────────────────────────────── */
.fac{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fac__c{border:1px solid var(--line);border-radius:14px;padding:20px 18px;background:#fff;text-align:center}
.fac__c .ic{font-size:26px;line-height:1}
.fac__c b{display:block;margin-top:12px;font-size:15.5px;font-weight:700;color:var(--ink)}
.fac__c p{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--mute)}
@media (max-width:860px){.fac{grid-template-columns:1fr 1fr}}

/* ── 온라인 참여 카드 ─────────────────────────────────────────────────
   현재 쓰는 화면이 없습니다 — 온라인 국민참여관이 준비 중 안내로 바뀌었습니다
   (2026-09-03). 참여 메뉴가 확정되면 다시 씁니다. */
.onl{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.onl__c{position:relative;display:flex;flex-direction:column;border-radius:20px;padding:30px 28px 28px;
  border:1px solid var(--line);background:#fff;transition:.24s cubic-bezier(.2,.7,.2,1);min-height:230px}
.onl__c:hover{transform:translateY(-5px);border-color:var(--brand);box-shadow:0 16px 34px rgba(30,39,51,.1)}
.onl__c .no{font-size:12.5px;font-weight:700;letter-spacing:.12em;color:var(--brand)}
.onl__c h4{margin-top:12px;font-size:20px;font-weight:700;letter-spacing:-.04em;line-height:1.35;color:var(--ink)}
.onl__c p{margin-top:12px;font-size:15px;line-height:1.7;color:var(--mute);flex:1}
.onl__c .go{margin-top:18px;font-size:14.5px;font-weight:700;color:var(--brand-d);display:inline-flex;align-items:center;gap:6px}
.onl__c--soon{background:var(--tint);border-style:dashed}
.onl__c--soon:hover{transform:none;border-color:var(--line);box-shadow:none}
.onl__c--soon h4,.onl__c--soon .no{color:var(--mute)}
.onl__c .ready{margin-top:18px;font-size:13.5px;font-weight:600;color:var(--mute)}
@media (max-width:1080px){.onl{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.onl{grid-template-columns:1fr}}

/* ── 숫자 강조 ──────────────────────────────────────────────────────── */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:56px}
.nums__c{border-radius:18px;background:var(--tint);padding:26px 24px}
.nums__c .k{font-size:13.5px;font-weight:600;color:var(--mute)}
.nums__c .v{margin-top:8px;font-size:clamp(26px,3vw,34px);font-weight:700;letter-spacing:-.05em;color:var(--brand-d);line-height:1.1}
.nums__c .v small{font-size:16px;font-weight:600;color:var(--body);margin-left:3px}
@media (max-width:860px){.nums{grid-template-columns:1fr 1fr}}

/* ── 포상 목록 ──────────────────────────────────────────────────────── */
.awd{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.awd__c{display:flex;gap:18px;align-items:flex-start;border:1px solid var(--line);border-radius:16px;padding:22px 24px;background:#fff}
.awd__c .md{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:20px;flex:none;background:var(--soft)}
.awd__c b{display:block;font-size:16.5px;font-weight:700;color:var(--ink);letter-spacing:-.03em}
.awd__c p{margin-top:6px;font-size:14.5px;line-height:1.65;color:var(--mute)}
@media (max-width:760px){.awd{grid-template-columns:1fr}}

/* ── 행사장 : 사진 + 지도 ───────────────────────────────────────────── */
.vmap{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.vmap__photo{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--tint);position:relative}
.vmap__photo img{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.vmap__photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 14px;color:#fff;
  font-size:14px;font-weight:600;background:linear-gradient(transparent,rgba(14,16,19,.82));
  display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.vmap__photo figcaption span{font-weight:400;font-size:12.5px;color:rgba(255,255,255,.72);white-space:nowrap}
.vmap__map{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--tint)}
.vmap__map iframe{width:100%;height:100%;min-height:100%;aspect-ratio:16/9;border:0;display:block}
.vmap__src{position:absolute;right:10px;bottom:8px;margin:0;padding:3px 10px;border-radius:999px;
  background:rgba(255,255,255,.9);font-size:11.5px;color:var(--mute)}
@media (max-width:860px){.vmap{grid-template-columns:1fr}}

/* 장소 정보 + 지도앱 버튼 */
.vmap__info{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:22px 24px;border-radius:16px;background:var(--tint);margin-bottom:26px}
.vmap__info .k{font-size:12.5px;font-weight:700;letter-spacing:.12em;color:var(--brand)}
.vmap__info h4{margin-top:8px;font-size:20px;font-weight:700;letter-spacing:-.04em;color:var(--ink)}
.vmap__info .addr{margin-top:7px;font-size:15.5px;color:var(--body)}
.vmap__info .use{margin-top:5px;font-size:14.5px;font-weight:600;color:var(--brand-d)}
.vmap__btn{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:640px){.vmap__info{padding:20px}.vmap__btn .btn{flex:1;min-width:110px}}
.vmap__off{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:20px;
  background:var(--tint);font-size:14.5px;color:var(--mute);text-align:center}
.vmap__hint{align-self:center;font-size:13.5px;color:var(--mute);margin-right:2px}
@media (max-width:640px){.vmap__hint{display:none}}