/* assets/css/subpage.css — 안내 페이지(회사소개·약관·환불규정·가이드) 본문 디자인
   헤더/푸터는 site-chrome.css. 이 파일은 히어로·이동 탭·카드·표·가이드 목록/상세만 담당. */

/* ── 히어로 ── */
.sp-hero{position:relative;color:#fff;background:#0c2a20 center/cover no-repeat;text-align:center}
.sp-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,28,20,.62) 0%,rgba(8,28,20,.88) 100%)}
.sp-hero-in{position:relative;z-index:2;padding:136px 20px 58px}
.sp-hero .eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:13px;letter-spacing:3.5px;font-weight:700;color:var(--gold);text-transform:uppercase;margin-bottom:14px}
.sp-hero .eyebrow::before,.sp-hero .eyebrow::after{content:"";width:26px;height:1px;background:var(--gold);opacity:.7}
.sp-hero h1{font-size:38px;font-weight:900;letter-spacing:-.6px;line-height:1.3;max-width:820px;margin:0 auto}
.sp-hero p{color:#dfe7e2;margin:14px auto 0;font-size:17px;max-width:720px}

/* ── 이동 탭(알약형) ── */
.sp-tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:-22px auto 0;position:relative;z-index:3}
.sp-tab{background:#fff;border:1.5px solid var(--line);color:var(--muted);font-size:15px;font-weight:700;padding:9px 22px;border-radius:999px;transition:.2s;box-shadow:0 6px 18px rgba(20,40,30,.08)}
.sp-tab:hover{border-color:var(--emerald);color:var(--emerald)}
.sp-tab.on{background:var(--forest);border-color:var(--forest);color:#fff;box-shadow:0 8px 20px rgba(15,90,67,.25)}

/* ── 본문 영역 ── */
.sp-main{padding:38px 0 30px}
.narrow{max-width:900px}

/* 카드(약관·규정 단락) */
.sp-main .card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 36px;margin-bottom:20px;box-shadow:0 10px 30px rgba(20,40,30,.05)}
.sp-main .card h2{position:relative;display:flex;align-items:center;gap:12px;font-size:20px;font-weight:800;color:var(--forest);letter-spacing:-.3px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.sp-main .card h2::after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:2px;background:var(--gold)}
.sp-main .card h2 .n{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--forest),var(--emerald));color:#fff;font-size:15px;font-weight:800;box-shadow:0 4px 10px rgba(15,90,67,.28)}
.sp-main .card p{color:#3b443f;font-size:15.5px;margin-bottom:10px}
.sp-main .card b{color:var(--ink)}
.sp-main .card ul{list-style:none;margin:8px 0 12px}
.sp-main .card li{position:relative;color:#3b443f;font-size:15.5px;margin-bottom:8px;padding-left:20px}
.sp-main .card li::before{content:"";position:absolute;left:3px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.sp-main .card a{color:var(--emerald);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* 강조 박스 */
.sp-main .hl{background:#fbf6e6;border:1px solid #efe3bd;color:#6b5420;padding:14px 18px;border-radius:12px;font-size:14.5px;line-height:1.7;margin:0 0 22px}
.sp-main .card .hl{margin:14px 0 4px}

/* 표 */
.sp-main .tb,.sp-main .g-tb{width:100%;border-collapse:separate;border-spacing:0;margin:14px 0 18px;font-size:15px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.sp-main .tb th,.sp-main .g-tb th{background:#eef6f1;color:var(--forest);padding:13px 16px;text-align:left;font-weight:800;border-bottom:1px solid #d6e8de}
.sp-main .tb td,.sp-main .g-tb td{padding:13px 16px;border-bottom:1px solid var(--line);color:#3b443f}
.sp-main .tb tr:last-child td,.sp-main .g-tb tr:last-child td{border-bottom:0}
.sp-main .tb tbody tr:hover td,.sp-main .g-tb tbody tr:hover td{background:#fafaf6}

/* ── 가이드 목록 ── */
.g-list{display:flex;flex-wrap:wrap;gap:22px;margin-top:6px}
.g-card{flex:0 1 calc((100% - 44px)/3);min-width:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(20,40,30,.07);transition:.28s}
.g-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.g-card .thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:#e3eae3}
.g-card .thumb i{position:absolute;inset:0;background:center/cover no-repeat;transition:transform .5s ease}
.g-card:hover .thumb i{transform:scale(1.07)}
.g-card .body{display:flex;flex-direction:column;gap:8px;flex:1;padding:18px 20px 20px}
.g-card .tags{display:flex;gap:6px;flex-wrap:wrap}
.g-card .tag{font-size:12px;font-weight:700;color:var(--forest);background:#eef6f1;border-radius:999px;padding:3px 10px}
.g-card h3{font-size:19px;font-weight:800;line-height:1.4;letter-spacing:-.3px}
.g-card .sum{font-size:15px;color:var(--muted);flex:1}
.g-card .foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px;margin-top:4px;font-size:13.5px;color:#9aa49d;font-weight:600}
.g-card .more{display:inline-flex;align-items:center;gap:4px;color:var(--emerald);font-weight:800}
.g-card .more svg{width:15px;height:15px;transition:transform .2s}
.g-card:hover .more svg{transform:translateX(3px)}

/* ── 가이드 상세 ── */
.crumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--muted);margin-bottom:16px}
.crumb a:hover{color:var(--emerald)}
.crumb svg{width:14px;height:14px;opacity:.55}
.detail{background:#fff;border:1px solid var(--line);border-radius:20px;padding:44px 52px;box-shadow:0 10px 30px rgba(20,40,30,.05)}
.detail .d-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.detail .tags{display:flex;gap:6px;flex-wrap:wrap}
.detail .tag{font-size:13px;font-weight:700;color:var(--forest);background:#eef6f1;border-radius:999px;padding:4px 12px}
.detail .date{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);margin-left:auto}
.detail .date svg{width:15px;height:15px}
.detail h2{position:relative;font-size:22px;font-weight:800;color:var(--forest);letter-spacing:-.3px;margin:38px 0 14px;line-height:1.4}
.detail h2:first-of-type{margin-top:0}
.detail p{font-size:16.5px;color:#374139;margin-bottom:14px;line-height:1.85}
.detail ul{list-style:none;margin:10px 0 16px}
.detail li{position:relative;font-size:16px;color:#374139;margin-bottom:9px;padding-left:20px;line-height:1.75}
.detail li::before{content:"";position:absolute;left:3px;top:.8em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.detail a{color:var(--emerald);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.detail .g-note{background:#fbf6e6;border:1px solid #efe3bd;color:#6b5420;padding:14px 18px;border-radius:12px;font-size:14.5px;margin-top:18px;line-height:1.7}
.detail .g-note a{color:var(--forest)}

/* 하단 상담 유도 + 이동 */
.g-cta{margin-top:26px;border-radius:20px;padding:34px 36px;background:linear-gradient(135deg,#0c3a2c,var(--forest) 55%,#17775a);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;box-shadow:var(--shadow)}
.g-cta h3{font-size:22px;font-weight:900;letter-spacing:-.3px}
.g-cta p{color:#cfe0d8;font-size:15.5px;margin-top:4px}
.btn-gold{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#241c08;font-weight:900;font-size:16px;padding:14px 26px;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.25);transition:.2s}
.btn-gold:hover{transform:translateY(-2px)}
.btn-gold svg{width:16px;height:16px}
.g-others{margin-top:34px}
.g-others h3{font-size:19px;font-weight:800;margin-bottom:14px}
.g-others .g-list{margin-top:0}
.g-others .g-card{flex:0 1 calc((100% - 22px)/2)}
.back-list{display:inline-flex;align-items:center;gap:6px;margin-top:22px;padding:11px 20px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--forest);font-weight:800;font-size:15px}
.back-list:hover{border-color:var(--emerald);color:var(--emerald)}
.back-list svg{width:15px;height:15px}

/* ── 반응형 ── */
@media(max-width:860px){.g-card{flex:0 1 calc((100% - 22px)/2)}}
@media(max-width:720px){
  .sp-hero-in{padding:108px 20px 46px}
  .sp-hero h1{font-size:28px}.sp-hero p{font-size:15.5px}
  .sp-tabs{margin-top:-18px;gap:8px}.sp-tab{font-size:13.5px;padding:8px 15px}
  .sp-main{padding-top:30px}
  .sp-main .card{padding:24px 20px;border-radius:16px}.sp-main .card h2{font-size:17.5px}
  .sp-main .card p,.sp-main .card li{font-size:15px}
  .sp-main .tb,.sp-main .g-tb{font-size:13.5px}.sp-main .tb th,.sp-main .tb td,.sp-main .g-tb th,.sp-main .g-tb td{padding:10px 9px}
  .detail{padding:28px 20px;border-radius:16px}
  .detail h2{font-size:19px;margin-top:30px}.detail p{font-size:15.5px}.detail li{font-size:15px}
  .detail .date{margin-left:0}
  .g-cta{padding:26px 22px}.g-cta h3{font-size:19px}
}
@media(max-width:560px){.g-card,.g-others .g-card{flex:0 1 100%}}