:root{ --bg:#ffffff; --text:#111827; --muted:#6b7280; --line:#e5e7eb; --chip:#f3f4f6; --panel:#111827; --panelText:#f6f6f6; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Pretendard,system-ui,Apple SD Gothic Neo,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:800;letter-spacing:-0.2px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.hero{padding:40px 0;border-bottom:1px solid var(--line)}
.kicker{color:var(--muted);font-size:14px;margin-bottom:8px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid var(--line);padding:10px 12px;text-align:center}
.table th{background:#f9fafb}
footer{padding:28px 0;color:var(--muted)}
/* Slide-out mega menu */
.actions{display:flex;gap:8px;align-items:center}
.megaBtn{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 14px;cursor:pointer}
.panel{position:fixed;top:0;right:-420px;width:min(420px,92vw);height:100vh;background:var(--panel);color:var(--panelText);box-shadow:-12px 0 28px rgba(0,0,0,.25);transition:right .28s ease;z-index:60;display:flex;flex-direction:column}
.panel.open{right:0}
.panel header{border-bottom:1px solid rgba(255,255,255,.12);background:transparent}
.panel .hd{display:flex;align-items:center;justify-content:space-between;padding:16px 18px}
.panel .hd strong{font-size:18px}
.panel .close{background:transparent;border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:10px;padding:8px 10px;cursor:pointer}
.panel .body{padding:14px 16px;overflow:auto}
.panel h4{margin:16px 0 8px 0;font-size:14px;color:#FFD166}
.kw{display:block;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.12);font-size:14px}
.kw a{color:#fff;text-decoration:none}
.badge{display:inline-block;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 10px;margin:4px 6px;color:#fff}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:saturate(120%) blur(2px);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:55}
.overlay.show{opacity:1;pointer-events:auto}
@media (max-width:640px){ .container{padding:0 14px} .brand{font-size:15px} }

/* v8.1 header tweak */
.actions .homeBtn{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 14px;text-decoration:none}
.brand a{color:inherit;text-decoration:none}

/* ===== v8.2 PRICING TABLE UPGRADE ===== */
.pricing-wrap{margin-top:8px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 8px 28px rgba(0,0,0,.06)}
.pricing-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:linear-gradient(180deg,#fbfbfc,#f6f7f9)}
.pricing-head .badge{background:#eef2ff;border:1px solid #e5e7eb;color:#1f2937;font-weight:600}
.pricing-table{width:100%;border-collapse:separate;border-spacing:0}
.pricing-table thead th{position:sticky;top:0;background:#fafafa;border-bottom:1px solid var(--line);padding:14px 12px;font-weight:800}
.pricing-table td{padding:16px 12px;border-top:1px solid var(--line)}
.pricing-table tr:nth-child(odd) td{background:#fcfcfd}
.pricing-table tr:hover td{background:#f7fafc}
.price{font-weight:700;letter-spacing:.1px}
.dim{color:var(--muted)}
.note{color:var(--muted);font-size:13px;margin:10px 4px 0 4px}
/* Mobile: stack rows */
@media (max-width:700px){
  .pricing-table thead{display:none}
  .pricing-table tr{display:block;border-top:1px solid var(--line);padding:10px 0}
  .pricing-table td{display:flex;justify-content:space-between;align-items:center;border:0;padding:8px 14px}
  .pricing-table td::before{content:attr(data-label);font-weight:600;color:#6b7280}
}

/* ===== v8.3 DARK PAGE BACKGROUND ===== */
.bg-dark{background:#0f172a;padding:0 0 40px 0}
.bg-dark .container{color:#e5e7eb}
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark .kicker{color:#e5e7eb}
.bg-dark a{color:#e5e7eb}
.hero{background:transparent}
/* keep cards readable on dark bg */
.pricing-wrap{background:#fff;box-shadow:0 8px 28px rgba(0,0,0,.32)}

/* ===== v8.4 DARKER BG + NEON PRICING ===== */
.bg-dark{background:#060b14} /* darker navy-black */
.bg-dark .container{color:#e8eef8}
.bg-dark a{color:#dbeafe}

/* Neon pricing variant */
.pricing-wrap.neon{
  background:linear-gradient(180deg, rgba(12,18,32,.96), rgba(8,12,24,.96));
  border:1px solid rgba(0,255,224,.45);
  border-radius:16px;
  box-shadow:
    0 0 0 1px rgba(0,255,224,.25) inset,
    0 10px 30px rgba(0,0,0,.6),
    0 0 28px rgba(0,255,224,.18);
}
.pricing-wrap.neon .pricing-head{
  background:linear-gradient(180deg, rgba(18,26,44,.9), rgba(12,20,38,.9));
  color:#e8faff;
  border-bottom:1px solid rgba(0,255,224,.25);
}
.pricing-wrap.neon .badge{
  background:rgba(0,255,224,.09);
  border:1px solid rgba(0,255,224,.45);
  color:#bffcff;
}

/* Table colors */
.pricing-wrap.neon .pricing-table thead th{
  background:transparent;
  color:#cfefff;
  border-bottom:1px solid rgba(0,255,224,.25);
}
.pricing-wrap.neon .pricing-table td{
  border-top:1px solid rgba(255,255,255,.06);
  color:#e9f3ff;
}
.pricing-wrap.neon .pricing-table tr:nth-child(odd) td{
  background:rgba(255,255,255,.02);
}
.pricing-wrap.neon .pricing-table tr:hover td{
  background:rgba(0,255,224,.06);
}
.pricing-wrap.neon .price{
  color:#a5fff7;
  text-shadow:0 0 10px rgba(0,255,224,.35), 0 0 2px rgba(0,255,224,.35);
  font-weight:800;
}
.pricing-wrap.neon .dim{color:rgba(200,210,220,.6)}

/* Mobile cards keep neon vibe */
@media (max-width:700px){
  .pricing-wrap.neon .pricing-table td::before{color:#9bdcff}
}

/* ===== v8.5 HEADER BUTTONS (smaller) + smooth scroll ===== */
html{scroll-behavior:smooth}
.btn,.megaBtn,.actions .homeBtn,.btn-pricing{
  padding:8px 12px !important;
  border-radius:10px !important;
  font-size:14px !important;
  line-height:1.1;
}
.actions{gap:6px}

/* v8.5 reapply CSS safe */

/* ===== v8.7 NEON CTA BUTTONS ===== */
.btn-neon{
  position:relative;
  background:rgba(0,255,224,.08);
  border:1px solid rgba(0,255,224,.55);
  color:#bffcff !important;
  box-shadow:0 0 18px rgba(0,255,224,.25), inset 0 0 18px rgba(0,255,224,.12);
  text-shadow:0 0 8px rgba(0,255,224,.35);
}
.btn-neon:hover{box-shadow:0 0 26px rgba(0,255,224,.45), inset 0 0 22px rgba(0,255,224,.18)}
.btn-ghost{background:transparent;border:1px solid rgba(0,255,224,.35);color:#dffcff !important}

/* ===== v8.9 CONTRAST + NEON CTA TUNE ===== */
.bg-dark .container{color:#f0f7ff}
.bg-dark h1,.bg-dark h2,.bg-dark h3{color:#ffffff}
.btn-neon{
  background:rgba(0,255,224,.12);
  border:1px solid rgba(0,255,224,.65);
  color:#eaffff !important;
  font-weight:700;
}
.btn-neon:hover{box-shadow:0 0 30px rgba(0,255,224,.55), inset 0 0 22px rgba(0,255,224,.2)}
.btn-ghost{background:transparent;border:1px solid rgba(0,255,224,.55);color:#eaffff !important}
/* Hide kicker labels sitewide if any slipped through */
.kicker{display:none!important}

/* ===== v8.10 COURSE NAME EMPHASIS + DEEP BLUE BUTTONS ===== */
:root{ --primary:#0b3bf3; --primary-ink:#ffffff; }
.pricing-wrap.neon .pricing-table td:first-child{
  text-align:left;
  font-weight:800;
  color:#c9f7ff;
  letter-spacing:.2px;
  background:linear-gradient(90deg, rgba(0,255,224,.08), rgba(0,255,224,0) 60%);
  text-shadow:0 0 10px rgba(0,255,224,.22);
  border-left:3px solid rgba(0,255,224,.35);
}
/* keep header cell aligned center but brighter */
.pricing-wrap.neon .pricing-table thead th:first-child{
  text-align:left;
  color:#e0f7ff;
}
/* Deep blue CTA buttons */
.btn-primary{
  background:var(--primary);
  color:var(--primary-ink) !important;
  border:1px solid rgba(138,180,255,.5);
  box-shadow:0 10px 24px rgba(35,85,255,.35), inset 0 -2px 0 rgba(255,255,255,.12);
  font-weight:700;
}
.btn-primary:hover{filter:brightness(1.05); box-shadow:0 12px 30px rgba(35,85,255,.5)}
.btn-primary.btn-ghost{background:transparent;color:#cfe0ff!important;border-color:rgba(138,180,255,.6)}

/* ===== v8.11 PRICE CELL CENTERING (desktop only) ===== */
@media (min-width:701px){
  .pricing-wrap .pricing-table th:not(:first-child),
  .pricing-wrap .pricing-table td:not(:first-child){
    text-align:center;
  }
}

/* ===== v8.12 HERO IMAGE ===== */
.hero-visual{position:relative; margin:0 auto; width:100%; height:380px; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.06)}
.hero-visual picture, .hero-visual img{width:100%; height:100%; object-fit:cover; display:block}
@media (max-width:700px){ .hero-visual{height:320px} }

/* ===== v8.15 Region quick keywords ===== */
.region-quick{margin:8px 12px 16px; padding:10px 14px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.06); border-radius:10px}
.region-quick li{list-style:none; margin:6px 0; color:#cfe8ff; font-size:14px}
.region-quick a{color:#e8f5ff; text-decoration:none; font-weight:700}
.region-quick a:hover{text-decoration:underline}

/* ===== v8.16 Kakao OpenChat Button ===== */
.btn-kakao{
  display:inline-flex; align-items:center; gap:6px;
  background:#FEE500; color:#111 !important; border:1px solid #d4b300;
  border-radius:9999px; padding:6px 10px; font-weight:700; line-height:1;
  box-shadow:0 4px 12px rgba(254,229,0,.25);
}
.btn-kakao:hover{filter:brightness(1.04); box-shadow:0 6px 16px rgba(254,229,0,.35)}
.btn-kakao svg{fill:#111}

/* ===== v8.17 Header emphasis buttons ===== */
.btn-brand{
  background:linear-gradient(135deg, rgba(0,255,224,.18), rgba(11,59,243,.12));
  color:#eafaff !important; border:1px solid rgba(0,255,224,.45);
  box-shadow:0 6px 18px rgba(0,255,224,.25), inset 0 0 14px rgba(0,255,224,.12);
  font-weight:800; letter-spacing:.2px; padding:.6rem 1rem;
}
.btn-brand:hover{box-shadow:0 8px 24px rgba(0,255,224,.35), inset 0 0 18px rgba(0,255,224,.18); transform:translateY(-1px)}

.btn-call{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#0b3bf3; color:#fff !important; border:1px solid rgba(138,180,255,.6);
  box-shadow:0 10px 22px rgba(35,85,255,.45), 0 0 0 2px rgba(11,59,243,.15) inset;
  font-weight:900; letter-spacing:.3px; padding:.65rem 1.05rem; border-radius:9999px;
}
.btn-call .num{font-feature-settings:'tnum' 1; font-variant-numeric:tabular-nums}
.btn-call:hover{filter:brightness(1.06); transform:translateY(-1px)}
.btn-call svg{fill:#fff}
.pulse{animation:callPulse 1.8s ease-out infinite}
@keyframes callPulse{
  0%{ box-shadow:0 0 0 0 rgba(35,85,255,.45) }
  70%{ box-shadow:0 0 0 14px rgba(35,85,255,0) }
  100%{ box-shadow:0 0 0 0 rgba(35,85,255,0) }
}
/* keep other header buttons slightly smaller to increase contrast */
.header .btn{padding:.48rem .9rem}
.header .btn.btn-brand, .header .btn.btn-call{padding:.65rem 1.05rem}

/* ===== v8.19 Mobile polish: brand/copyright/btns ===== */
@media (max-width: 480px){
  /* Brand text left-top: keep on one line */
  .header .site-title, .header .site-logo, .header .brand, header .brand, header .site-title{
    font-size: 18px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    max-width: 46vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-weight: 800;
  }

  /* Header button row: smaller & no wrapping inside each */
  .header .btn{
    font-size: 14px !important;
    padding: .42rem .72rem !important;
    white-space: nowrap !important;
  }
  .header .btn.btn-call{ padding:.52rem .9rem !important; font-size:14.5px !important }
  .header .btn.btn-brand{ padding:.52rem .9rem !important; font-size:14.5px !important }

  /* Reduce inter-button gaps a bit if header uses gap */
  .header .btn + .btn{ margin-left: 6px }

  /* Keep dropdown trigger compact */
  .header .megaBtn{ padding:.42rem .6rem }

  /* Footer copyright: single line, smaller, ellipsis */
  footer .copyright, .footer .copyright, footer .legal, .footer .legal .copyright{
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Slightly wider threshold for tiny phones (<=360px) */
@media (max-width: 360px){
  .header .site-title, .header .site-logo, .header .brand, header .brand, header .site-title{
    font-size: 16px !important;
    max-width: 52vw !important;
  }
  .header .btn{ font-size: 13px !important; padding:.38rem .62rem !important }
  .header .btn.btn-call, .header .btn.btn-brand{ font-size:13.5px !important; padding:.46rem .8rem !important }
}
/* === FINAL: Mobile top actions stay horizontal (no vertical text) === */
@media (max-width:768px){
  .problem-button-or-class { writing-mode: horizontal-tb !important; transform: none !important; }
}


  /* 1) 상단 버튼 줄: 가로 1줄 + 가로 스크롤 강제 */
  header .actions, .header .actions, .topbar .actions, .top-nav .actions, .navbar .actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  header .actions::-webkit-scrollbar,
  .header .actions::-webkit-scrollbar,
  .topbar .actions::-webkit-scrollbar { display: none; }

  /* 2) 각 버튼: 세로쓰기/회전/줄바꿈 완전 차단 + 고정 높이 */
  header .actions a, header .actions button,
  .header .actions a, .header .actions button,
  .topbar .actions a, .topbar .actions button,
  .top-nav .actions a, .top-nav .actions button,
  .navbar .actions a, .navbar .actions button {
    writing-mode: horizontal-tb !important;  /* 세로쓰기 무효화 */
    transform: none !important;              /* rotate(90deg) 등 회전 무효화 */
    white-space: nowrap !important;          /* 줄바꿈 금지 */
    word-break: keep-all !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    max-width: none !important;
  }

  /* 3) 버튼 아이템은 줄바꿈 없이 가로로 흐르게 */
  header .actions > *, .header .actions > *, .topbar .actions > *, .top-nav .actions > * {
    flex: 0 0 auto !important;
  }

  /* 4) (선택) 가독성 위한 최소 폭 */
  .btn--brand  { min-width: 118px !important; }
  .btn--call   { min-width: 160px !important; }
  .btn--intro  { min-width: 72px  !important; }
  .btn--price  { min-width: 80px  !important; }
  .btn--region { min-width: 100px !important; }

  /* 5) 혹시 상단 바가 세로 쌓이도록 바뀌는 규칙이 있으면 해제 */
  header .nav, .header .nav, .topbar .nav, .top-nav .nav, .navbar .nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row !important;
  }
}


/* Brand: K 로고 + 텍스트 */
.brand-logo a{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.brand-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.brand-text{font-weight:800;letter-spacing:-0.2px;white-space:nowrap;line-height:1.1}
.bg-dark .brand-icon{box-shadow:0 2px 16px rgba(0,0,0,.35)}
.bg-dark .brand-text{color:#eaf0ff}
@media (max-width:480px){.brand-icon{width:32px;height:32px}.brand-logo .brand-text{font-size:16px}}
@media (max-width:360px){.brand-logo .brand-text{font-size:15px}}

/* 데스크톱(>700px): 진짜 테이블 레이아웃 강제 */
@media (min-width:701px){
  .pricing-table { display:table; width:100%; border-collapse:separate; border-spacing:0 }
  .pricing-table thead { display:table-header-group !important; }
  .pricing-table tbody { display:table-row-group !important; }
  .pricing-table tr { display:table-row !important; }
  .pricing-table th, .pricing-table td { display:table-cell !important; vertical-align:middle }
}

/* 모바일(<=700px): 카드형 레이아웃 */
@media (max-width:700px){
  .pricing-table thead{display:none !important}
  .pricing-table tr{display:block; border-top:1px solid var(--line); padding:10px 0}
  .pricing-table td{
    display:flex !important;
    justify-content:space-between;
    align-items:center;
    border:0;
    padding:8px 14px;
  }
  .pricing-table td::before{
    content:attr(data-label);
    font-weight:600;
    color:#9bdcff;
    margin-right:10px;
  }
  .pricing-table td:first-child{ font-weight:800 }
}

/* 한국인 스웨디시 행: 60/90/120/150 셀을 항상 표시 */
.pricing-table tr.course-kor-swedish td:nth-child(2),
.pricing-table tr.course-kor-swedish td:nth-child(3),
.pricing-table tr.course-kor-swedish td:nth-child(4),
.pricing-table tr.course-kor-swedish td:nth-child(5){
  display: table-cell !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 모바일 카드형에서도 레이블이 나오도록 */
@media (max-width:700px){
  .pricing-table tr.course-kor-swedish td{
    display: flex !important;
    justify-content: space-between;
    align-items: center;
  }
  .pricing-table tr.course-kor-swedish td::before{
    content: attr(data-label);
    font-weight: 700;
    color: #9bdcff;
    margin-right: 8px;
  }
}

/* 하단 고정바 신규 버튼 스타일 */
#sticky-cta a.home{
  background:#3B82F6;   /* 파란색 홈 버튼 */
  color:#fff;
  font-weight:700;
}

#sticky-cta a.kakao{
  background:#FEE500;   /* 카카오 옐로우 */
  color:#111;           /* 글자/아이콘 검정 */
  font-weight:700;
}
#sticky-cta a.kakao:hover,
#sticky-cta a.kakao:focus{ filter: brightness(0.95); }

#sticky-cta a.kakao svg{ fill: currentColor; }  /* 아이콘 색 = 글자색 */

/* ── 헤더 '전화상담' = 테두리색으로 꽉 채움(오버라이드) ── */
.header .actions a[href^="tel"]{
  --callColor: rgba(0,255,224,.55);       /* 테두리색과 동일하게 사용 */
  border: 2px solid var(--callColor) !important;
  background: var(--callColor) !important; /* 배경 = 테두리색 */
  color:#111 !important;                   /* 글자: 검정 */
  text-shadow:none !important;
  box-shadow:none !important;
  border-radius:18px !important;
  padding:10px 18px !important;
  font-weight:800;
  line-height:1;
}
.header .actions a[href^="tel"]:hover  { filter: brightness(0.96); }
.header .actions a[href^="tel"]:active { filter: brightness(0.92); }

/* 다른 버튼 스킨이 붙어 있어도 강제로 동일하게 */
.header .actions a[href^="tel"].btn-neon,
.header .actions a[href^="tel"].btn-primary,
.header .actions a[href^="tel"].btn-brand,
.header .actions a[href^="tel"].btn-call{
  background: var(--callColor) !important;
  border-color: var(--callColor) !important;
  color:#111 !important;
  box-shadow:none !important;
}