:root{
  /* Light */
  --bg:#ffffff;
  --card:#F9FAFB;
  --line:#E5E7EB;
  --text:#0F172A;
  --text-sub:#374151;
  --muted:#6B7280;

  --primary:#1463FF;
  --primary-hover:#4DA3FF;

  --chip:#F3F4F6;
  --chip2:#111827;
  --chip-text:#1F2937;
  --chip-text2:#fff;
}
:root[data-theme="dark"]{
  --bg:#0B111A;
  --card:#0F172A;
  --line:#1F2937;
  --text:#E5E7EB;
  --text-sub:#CBD5E1;
  --muted:#94A3B8;

  --primary:#4DA3FF;
  --primary-hover:#74B8FF;

  --chip:#111827;
  --chip2:#ffffff;
  --chip-text:#E5E7EB;
  --chip-text2:#333;
}
/* 시스템 다크 선호 시(직접 선택 없을 때) 기본값을 다크로 */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){ 
    --bg:#0B111A; --card:#0F172A; --line:#1F2937; --text:#E5E7EB; --text-sub:#CBD5E1; --muted:#94A3B8;
    --primary:#4DA3FF; --primary-hover:#74B8FF; --chip:#111827; --chip-text:#E5E7EB;
  }
}

/* 로고 영역을 고정된 비율로 확보 (여백 차이 무시) */
:root{ --logo-ratio: 16/7; } /* 로고 가로:세로 비율. 필요하면 16/6, 5/2 등으로 조정 */
.logo-wrap{
  width:min(560px, 92vw);
  margin:0 auto 10px;
}
.logo-box{
  position:relative;
  width:100%;
  aspect-ratio: var(--logo-ratio);   /* 최신 브라우저 */
  /* 구형 브라우저 폴백 */
}
@supports not (aspect-ratio: 1/1){
  .logo-box{ height: 220px; }        /* 폴백 높이. 필요시 조정 */
}

/* 두 로고를 겹친 뒤 opacity로만 전환 → 레이아웃 고정 */
.logo-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  display:block; opacity:0;
  transition:opacity .28s cubic-bezier(.2,.8,.2,1);
}
/* 라이트/다크 노출 선택 */
:root[data-theme="light"] .logo-img.light { opacity:1; }
:root[data-theme="dark"]  .logo-img.dark  { opacity:1; }
/* data-theme 없고 시스템이 다크일 때 초기값 */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .logo-img.dark{opacity:1}
}


/* ========= Landing ========= */
body{background:var(--bg); color:var(--text);}
.landing{min-height:calc(100vh - 120px);display:flex;align-items:center;justify-content:center;text-align:center;padding:24px}
.inner{max-width:920px;width:100%}
.tagline{font-size:14px;color:var(--muted);letter-spacing:.02em;margin-bottom:30px}
.brand{font-weight:900;letter-spacing:.02em;margin:0 0 14px;color:var(--text);font-size:clamp(40px,9vw,96px);line-height:1}
.actions{display:inline-flex;gap:10px;margin-top:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 18px;border-radius:5px;font-weight:800;border:0;transition:all .2s}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover)}
.btn-board{background:var(--chip2);color:var(--chip-text2);border:1px solid var(--line)}
.footer-min{text-align:center;color:var(--muted);font-size:12px;padding:24px 0 32px}
.footer-min a{color:var(--text-sub);margin:0 8px}
.divider{display:inline-block;color:#cbd5e1;margin:0 8px}

/* Theme toggle button (우상단 고정) */
.theme-toggle{
  position:fixed; top:12px; right:12px; z-index:100001;
  background:var(--chip); color:var(--chip-text);
  border:1px solid var(--line); border-radius:999px;
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  font-size:18px; cursor:pointer;
}
.theme-toggle:hover{filter:brightness(1.05)}

@media (max-width:420px){  .btn{width:220px} }

/* ========= Modal (로그인) ========= */
.kk-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.5);z-index:100000}
.kk-modal.open{display:flex}
.kk-dlg{width:min(560px,92vw);background:var(--card);border-radius:14px;border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.35);padding:18px}
.kk-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.kk-title{font-size:18px;font-weight:800;color:var(--text);margin:0}
.kk-close{appearance:none;border:1px solid var(--line);background:var(--chip);color:var(--chip-text);border-radius:8px;width:36px;height:36px;font-size:18px;cursor:pointer}
.kk-body{padding:8px 4px 4px}
.kk-field{margin:10px 0}
.kk-field label{display:block;font-weight:700;margin:0 0 6px;color:var(--text-sub)}
.kk-input{width:100%;height:44px;border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--bg);color:var(--text)}
.kk-actions{margin-top:8px}
.kk-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;    height: 50px;border-radius: 10px;border: 0;font-weight: 500;font-size: 16px;cursor: pointer;margin-top: 10px;}
.kk-btn.primary{background:var(--primary);color:#fff}
.kk-btn.primary:hover{background:var(--primary-hover)}
.kk-sub{display:flex;align-items:center;justify-content:space-between;margin-top:8px;font-size:13px;color:var(--muted)}
.kk-sub a{color:var(--text-sub)}


/* ── Pill 컨테이너 */
  #hd {display:none;}

  /* ============ Pill 네비 + 포털 드롭다운 ============ */
  .landing-nav { position: relative; margin-top: 14px; text-align: center; overflow: visible; }
  
.kk-pill-nav {
  display: flex;                 /* inline-flex → flex */
  justify-content: center;       /* 가운데 정렬 */
  align-items: center;
  gap: 18px;
  padding: 10px 20px;
  margin: 0 auto;                /* 좌우 가운데 */
  max-width: max-content;               /* 부모 폭 넘지 않게 */
  list-style: none;
  border: 1px solid var(--line, #d9dee5);
  border-radius: 30px;
  background: var(--chip-bg, #ffffff);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 1;
}

  [data-theme="dark"] .kk-pill-nav{
    border-color: var(--line-dark, #2a3443);
    background: var(--chip-bg-dark, #111826);
  }
  .kk-pill-nav .kk-item{ position: relative; flex: 0 0 auto; }
  .kk-pill-nav .kk-item > a{
    display: block;
    padding: 6px 2px;
    color: var(--fg, #0b1a33);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease;
    outline: none;
  }
  [data-theme="dark"] .kk-pill-nav .kk-item > a{ color: var(--fg-dark, #e5eaf2); }
  .kk-pill-nav .kk-item > a:hover{ color: #6b8cff; }
  .kk-pill-nav .kk-item.has-sub > a::after{
    content:'▾';
    margin-left:6px; font-size:12px; opacity:.7;
  }
  .kk-pill-nav .kk-item.sub-open > a::after{
    transform: rotate(180deg); display:inline-block;
  }

  /* (원본 서브 컨텐츠는 클론 용도로만 존재) — 처음엔 숨김 처리 */
  .kk-pill-nav .kk-item .kk-sub{ display:none; }

  /* 포털 레이어: ul 밖에 띄워서 overflow 클리핑 회피 */
  .kk-sub-layer{ position:absolute; top: 100%; left:0; width:100%; z-index:9999; pointer-events:none; }
  .kk-sub-layer.open{ pointer-events:auto; }
  .kk-sub-layer .kk-sub{
    position:absolute;
    min-width:180px;
    padding:8px;
    border:1px solid var(--line, #d9dee5);
    border-radius:14px;
    background:#fff;
    box-shadow:0 10px 24px rgba(16,24,40,.12);
    opacity:0; visibility:hidden; transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .kk-sub-layer.open .kk-sub{ opacity:1; visibility:visible; transform: translateY(0); }
  [data-theme="dark"] .kk-sub-layer .kk-sub{
    background:#0f1522; border-color: var(--line-dark, #2a3443);
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
  }

  .kk-sub .kk-sub-a{
    display:block; padding:10px 12px; border-radius:10px;
    text-decoration:none; font-size:14px; font-weight:600;
    color:#0b1a33; white-space:nowrap;
    transition: background-color .12s ease, color .12s ease;
  }
  [data-theme="dark"] .kk-sub .kk-sub-a{ color:#e5eaf2; }
  .kk-sub .kk-sub-a:hover{ background: rgba(107,140,255,.12); color:#4468ff; }

  /* 스크롤 바 스타일 */
  .kk-pill-nav::-webkit-scrollbar{ height:6px; }
  .kk-pill-nav::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius:999px; }
  [data-theme="dark"] .kk-pill-nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); }

  @media (max-width:420px){
    /* 좁은 화면에서는 좌측 정렬 느낌 */
    .kk-sub-layer .kk-sub{ transform: translateY(6px); }
    .kk-sub-layer.open .kk-sub{ transform: translateY(0); }
  }

  /* 접근성: 키보드 포커스 표시 */
  .kk-pill-nav .kk-item > a:focus { outline:2px solid #6b8cff33; outline-offset:2px; }
  
  
  /* ─────────────── Footer ─────────────── */
#ft {
  background: var(--ft-bg, #0b111a);
  color: var(--ft-fg, #e5eaf2);
  padding: 40px 20px;
  font-size: 14px;
  line-height: 1.7;
      background-image: linear-gradient(var(--overlay), var(--overlay)), var(--pattern, url(/img/fabric-blue.jpg)) !important;
}
[data-theme="light"] #ft {
  --ft-bg: #f8f9fc;
  --ft-fg: #1c1c1c;
}

#ft a {
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}
#ft a:hover {
  color: #6b8cff;
}

/* 카피라이트 */
#ft_copy {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 20px;
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: #a0a8b8;
}
[data-theme="light"] #ft_copy {
  border-top: 1px solid rgba(0,0,0,.08);
  color: #555;
}

/* 회사정보 */
.ft_cnt {
  margin-top: 24px;
  text-align: center;
}
.ft_cnt h2 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #6b8cff;
}
.ft_info {
  margin: 0;
  font-size: 13px;
  color: #a0a8b8;
}
[data-theme="light"] .ft_info { color: #666; }

/* PC버전 전환 버튼 */
#device_change {
  display: inline-block;
  margin-top: 20px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 13px;
  transition: background-color .2s, color .2s;
}
#device_change:hover {
  background: rgba(107,140,255,.15);
  color: #6b8cff;
}
[data-theme="light"] #device_change {
  border-color: rgba(0,0,0,.1);
}


/* ===== SNS Footer Buttons — FINAL ===== */
.site-sns{
  display:flex; justify-content:center; align-items:center; gap:12px;
  padding:18px 12px; margin:0 auto 8px; max-width:960px;
}
.site-sns .sns-btn{
  --bg: rgba(0,0,0,0.04);
  --bd: rgba(0,0,0,0.10);
  --fg: #111827;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px; border:1px solid var(--bd);
  background:var(--bg); color:var(--fg); text-decoration:none;
  font-size:14px; font-weight:700; line-height:1;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease, border-color .2s ease, filter .2s ease;
  backdrop-filter:saturate(140%) blur(2px);
}
.site-sns .sns-btn svg{ width:18px; height:18px; fill:currentColor; display:block; }
.site-sns .sns-btn:hover{ transform:translateY(-1px); }

/* ── 브랜드 컬러(보정 버전) ── */
/* NAVER */
.site-sns .sns-btn.naver{
  background:#03C75A; border-color:transparent; color:#fff;
}
.site-sns .sns-btn.naver:hover{
  background:#02b350; box-shadow:0 6px 15px rgba(3,199,90,.25);
}

/* KakaoTalk */
.site-sns .sns-btn.kakao{
  background:#FEE500;
  border-color:transparent;
  color:#3C1E1E;
}
.site-sns .sns-btn.kakao svg{
  fill:#3C1E1E;
}
.site-sns .sns-btn.kakao:hover{
  background:#f5dc00;
  box-shadow:0 6px 15px rgba(254,229,0,.45);
}


/* Instagram (정석 그라데이션 + 은은한 애니) */
.site-sns .sns-btn.insta{
  color:#fff; border-color:transparent;
  background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4);
  background-size:200% 200%;
  animation: instaGradient 6s ease infinite;
}
@keyframes instaGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@media (prefers-reduced-motion: reduce){
  .site-sns .sns-btn.insta{ animation:none; }
}
.site-sns .sns-btn.insta:hover{
  filter:brightness(1.06);
  box-shadow:0 6px 15px rgba(221,42,123,.35);
}

/* YouTube */
.site-sns .sns-btn.youtube{
  background:#ff0033; border-color:transparent; color:#fff;
}
.site-sns .sns-btn.youtube:hover{
  background:#e6002d; box-shadow:0 6px 15px rgba(255,0,51,.30);
}

/* 다크모드 기본톤 보정 */
@media (prefers-color-scheme: dark){
  .site-sns .sns-btn{ --bg:rgba(255,255,255,.06); --bd:rgba(255,255,255,.12); --fg:#e5e7eb; color:var(--fg); }
}

/* 모바일: 아이콘만, 480px↑ 텍스트 표시 */
.site-sns .sns-btn span{ display:none; }
@media (min-width:480px){ .site-sns .sns-btn span{ display:inline;         color: #000;} }

/* 푸터 인접 간격 */
.site-sns + * { margin-top:8px; }


/* 부모 요소에 container-type 선언 */
.section { container-type: inline-size; }



/*모바일 가로 & 태블릿 세로 : 480px-767px*/
@media all and (min-width:480px) and (max-width:767px){

.logo-wrap {width:100%;}
.tagline {font-size: 11px; letter-spacing: -1px;}


#ft_copy {font-size:11px;}

}



/* ===== 반응형 ===== */

/* 초소형 모바일 (≤480px) */
@media (max-width: 480px){
  .kk-pill-nav{
    gap: 10px;
    padding: 8px 12px;
    border-radius: 20px;
  }
  .tagline {font-size: 11px; letter-spacing: -1px;}
  .logo-wrap {width:100%;}
  #ft_copy {font-size:11px;}
}

/* 작은 태블릿 (481–767px) */
@media (min-width: 481px) and (max-width: 767px){
  .kk-pill-nav{
    gap: 12px;
    padding: 9px 16px;
    border-radius: 24px;
  }
  
  
}

/* 태블릿 (768–1023px) */
@media (min-width: 768px) and (max-width: 1023px){
  .kk-pill-nav{
    gap: 14px;
    padding: 10px 18px;
    border-radius: 26px;
  }
}

/* 노트북 이상 (≥1024px) */
@media (min-width: 1024px){
  .kk-pill-nav{
    gap: 18px;
    padding: 10px 22px;
    border-radius: 30px;
  }
}

/* 래퍼: 가운데 정렬(데스크톱), 모바일에서 페이드 효과용 위치 기준 */
.role-nav-wrap {
  margin: 14px auto;
  text-align: center;
  position: relative;
}

/* 기본(데스크톱): pill 네비 */
.role-pill-nav {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 15px 20px;
  border: 1px solid var(--line,#d9dee5);
  border-radius: 30px;
  background: var(--chip-bg,#fff);
  list-style: none;
}

/* 링크 */
.role-pill-nav li a {
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  color: var(--text,#111);
  padding: 6px 10px;
  white-space: nowrap;
}
.role-pill-nav li a:hover { color: var(--primary,#1463FF); }

/* 다크모드 */
[data-theme="dark"] .role-pill-nav {
    border-color: var(--line-dark, #2a3443);
    background: var(--chip-bg-dark, #111826);
}
[data-theme="dark"] .role-pill-nav li a { color: var(--text,#e5eaf2); }
[data-theme="dark"] .role-pill-nav li a:hover {
color: #6b8cff;
}

/* ===== 모바일(≤768px): 실제 스크롤 컨테이너는 ul! ===== */
@media (max-width: 768px){
  .role-nav-wrap{ text-align: left; padding-inline: 0; }

  .role-pill-nav{
    /* scroll container */
    display: flex;
    flex-wrap: nowrap;        /* 줄바꿈 금지 */
    gap: 14px;
    padding: 10px 14px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;         /* ← 가로 스크롤 */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    border-radius: 22px;
  }
  .role-pill-nav > li{
    flex: 0 0 auto;           /* 아이템은 고정폭으로 줄바꿈 X */
    scroll-snap-align: start;
  }
  .role-pill-nav li a{
    font-size: 14px;
    padding: 6px 10px;
  }

  /* 스크롤바 보이기(원하면 숨겨도 됨) */
  .role-pill-nav::-webkit-scrollbar{ height: 6px; }
  .role-pill-nav::-webkit-scrollbar-thumb{ background: #c6cbd3; border-radius: 4px; }
  .role-pill-nav{ scrollbar-width: thin; }

  /* 가장자리 페이드(오버레이 방식) */
  .role-nav-wrap::before,
  .role-nav-wrap::after{
    content:"";
    position:absolute; top:0; bottom:0; width:20px; pointer-events:none;
  }
  .role-nav-wrap::before{
    left:0; background: linear-gradient(to right, var(--kk-bg, #f7f8fb), rgba(255,255,255,0));
  }
  .role-nav-wrap::after{
    right:0; background: linear-gradient(to left, var(--kk-bg, #f7f8fb), rgba(255,255,255,0));
  }
  [data-theme="dark"] .role-nav-wrap::before{
    background: linear-gradient(to right, var(--kk-bg, #0b1220), rgba(0,0,0,0));
  }
  [data-theme="dark"] .role-nav-wrap::after{
    background: linear-gradient(to left, var(--kk-bg, #0b1220), rgba(0,0,0,0));
  }
  
  
  .theme-toggle-fab {        top: auto !important; bottom:10px;}
}

/* 초소형 */
@media (max-width: 420px){
  .role-pill-nav{ gap: 12px; padding: 8px 12px; }
  .role-pill-nav li a{ font-size: 13px; padding: 6px 8px; }
}








/* =========================================
   학생 · 학부모 온라인 이용 안내 전용 스타일
   (theme 변수/다크모드 연동 버전)
   ========================================= */

.guide-section {
  padding: 56px 0 80px;

  color: var(--text);
}
[data-theme="dark"] .guide-section {
  background:
    radial-gradient(circle at 0% 0%, rgba(59,130,246,0.18) 0, rgba(15,23,42,0) 40%),
    radial-gradient(circle at 100% 0%, rgba(236,72,153,0.16) 0, rgba(15,23,42,0) 45%),
    var(--bg);
}

.guide-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 헤더 영역 */
.guide-hero-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:var(--chip);
  color:var(--primary);
  font-size:11px;
  font-weight:600;
  margin-bottom:8px;
  border:1px solid var(--line);
}
.guide-hero-pill span.dot {
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--primary);
}

.guide-hero-title {
  font-size: 28px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 6px;
  display:flex;
  align-items:center;
  gap:8px;
}
.guide-hero-title-emoji {
  font-size: 26px;
}
.guide-hero-sub {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 26px;
}

/* 메인 2컬럼 레이아웃 */
.guide-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr);
  gap: 20px;
}
@media (max-width: 880px) {
  .guide-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 카드 공통 */
.guide-card {
  background: var(--card);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow:
      0 16px 40px rgba(15, 23, 42, 0.06),
      0 0 0 1px rgba(148, 163, 184, 0.35);
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .guide-card {
  box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.65),
      0 0 0 1px rgba(15, 23, 42, 1);
}

.guide-card::before {
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at top left, rgba(79,70,229,0.12), transparent 50%),
    radial-gradient(circle at bottom right, rgba(56,189,248,0.10), transparent 55%);
  opacity:0.8;
  pointer-events:none;
}
[data-theme="dark"] .guide-card::before {
  background:
    radial-gradient(circle at top left, rgba(59,130,246,0.28), transparent 50%),
    radial-gradient(circle at bottom right, rgba(236,72,153,0.22), transparent 55%);
}

.guide-card-inner {
  position: relative;
  z-index: 1;
}

/* 카드 헤더 */
.guide-card-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.guide-card-title {
  font-size:17px;
  font-weight:700;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:8px;
}
.guide-card-title-emoji {
  font-size:18px;
}

.guide-chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  background:var(--chip);
  color:var(--primary);
  border:1px solid var(--line);
}
.guide-chip span.dot {
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--primary);
}

/* 텍스트 & 리스트 */
.guide-card p {
  font-size:13px;
  color:var(--text-sub);
  line-height:1.7;
  margin:4px 0 8px;
}

.guide-step-label {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  color:var(--text);
  margin-top:10px;
  margin-bottom:3px;
}
.guide-step-label span.badge {
  min-width:20px;
  height:20px;
  border-radius:999px;
  background:rgba(37,99,235,0.04);
  border:1px solid rgba(37,99,235,0.45);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  color:var(--primary);
  font-weight:700;
}

.guide-list {
  margin:4px 0 4px;
  padding-left:18px;
}
.guide-list li {
  font-size:13px;
  color:var(--text-sub);
  margin-bottom:3px;
}

/* 태그(칩) */
.guide-tag-row {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
.guide-tag {
  font-size:11px;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
  background:rgba(249,250,251,0.95);
  display:inline-flex;
  align-items:center;
  gap:5px;
}
[data-theme="dark"] .guide-tag {
  background:rgba(15,23,42,0.9);
}
.guide-tag-emoji {
  font-size:12px;
}

/* 구분선 */
.guide-divider {
  height:1px;
  background:linear-gradient(
    to right,
    rgba(148,163,184,0.0),
    rgba(148,163,184,0.55),
    rgba(148,163,184,0.0)
  );
  margin:26px 0 18px;
}

/* FAQ / 연결 시스템 */
.guide-faq {
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap:14px;
}
@media (max-width:880px) {
  .guide-faq {
    grid-template-columns:minmax(0,1fr);
  }
}
.guide-faq-item {
  background:var(--card);
  border-radius:14px;
  padding:12px 14px;
  border:1px solid var(--line);
}
.guide-faq-q {
  font-size:13px;
  font-weight:600;
  color:var(--text);
  margin-bottom:3px;
  display:flex;
  align-items:center;
  gap:6px;
}
.guide-faq-q span.q-emoji {
  font-size:14px;
}
.guide-faq-a {
  font-size:12.5px;
  color:var(--text-sub);
}

/* 연결 시스템 카드(살짝 톤 다운) */
.guide-card.guide-connection {
  box-shadow:none;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--card);
}
.guide-card.guide-connection .guide-card-title {
  font-size:16px;
}

/* 마무리 문구 */
.guide-sign {
  margin-top:20px;
  padding-top:12px;
  border-top:1px dashed var(--line);
  font-size:12.5px;
  color:var(--muted);
}
.guide-sign strong {
  color:var(--text);
  font-weight:600;
}

/* 반응형 폰트/여백 살짝 조절 */
@media (max-width: 480px){
  .guide-hero-title { font-size:23px; }
  .guide-card { padding:16px 16px; border-radius:16px; }
  .guide-card-title { font-size:16px; }
  .guide-card p,
  .guide-list li { font-size:12.5px; }
}