/* KoreaPlus Guide — UX wave styles (pairs with modules/guide-ux.js).
   Tokens match hub-styles.css; print rules hide chrome/ads. */

.kp-read-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: transparent; pointer-events: none;
}
.kp-read-bar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent, #3b8eea), var(--accent2, #74b9ff));
  transition: width .12s linear;
}
.kp-read-remain {
  position: fixed; right: 16px; bottom: 88px; z-index: 120;
  padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 700;
  color: var(--text2, #aab); background: rgba(12, 24, 41, .88);
  border: 1px solid var(--border, rgba(255,255,255,.1));
  backdrop-filter: blur(8px);
}
html.light .kp-read-remain { background: rgba(255,255,255,.92); color: #445; }

.kp-top-fab {
  position: fixed; right: 16px; bottom: 72px; z-index: 121;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--border, rgba(255,255,255,.12));
  background: rgba(12, 24, 41, .9); color: var(--accent2, #74b9ff);
  font-size: 18px; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.kp-top-fab:hover { border-color: rgba(116,185,255,.4); }
html.light .kp-top-fab { background: #fff; color: #1a5fa8; }

.kp-print-btn, .kp-trip-set, .kp-trip-clear, .kp-keys-ok {
  margin-left: 8px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700;
  color: var(--accent2, #74b9ff);
  background: rgba(116,185,255,.1);
  border: 1px solid rgba(116,185,255,.28);
}
.kp-density-btn {
  background: transparent; border: 0; color: var(--text2); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 4px 6px;
}

.kp-kst-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: 11.5px;
  color: var(--accent2, #74b9ff); background: rgba(116,185,255,.08);
  border: 1px solid rgba(116,185,255,.2);
}
.kp-rel-upd { color: var(--text3, #8a93a0); font-size: 12px; }

.kp-season-tip {
  max-width: 920px; margin: 12px auto; padding: 10px 16px;
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
  font-size: 13px; color: var(--text2, #aab);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 12px; background: var(--surface, rgba(255,255,255,.04));
}
.kp-season-tip a { color: var(--accent2, #74b9ff); text-decoration: none; font-weight: 700; }

.kp-feat-rail { max-width: 960px; margin: 18px auto 8px; padding: 0 16px; }
.kp-feat-h {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text3, #8a93a0); margin-bottom: 8px;
}
.kp-feat-track {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 6px; scrollbar-width: thin;
}
.kp-feat-card {
  flex: 0 0 auto; scroll-snap-align: start; min-width: 148px;
  padding: 12px 14px; border-radius: 14px; text-decoration: none;
  color: var(--text, #eee); background: var(--surface, rgba(255,255,255,.04));
  border: 1px solid var(--border, rgba(255,255,255,.08));
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .15s, transform .15s;
}
.kp-feat-card:hover { border-color: rgba(116,185,255,.35); transform: translateY(-2px); }
.kp-feat-e { font-size: 20px; }
.kp-feat-t { font-size: 13px; font-weight: 700; line-height: 1.3; }

.kp-dest-map, .kp-place-map {
  height: 280px; width: 100%; max-width: 920px; margin: 16px 0 20px;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border, rgba(255,255,255,.1));
  z-index: 1;
}
.kp-place-map { height: 220px; }

.kp-trip-cd {
  max-width: 920px; margin: 10px auto; padding: 10px 14px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 13px; border-radius: 12px;
  background: rgba(116,185,255,.06); border: 1px solid rgba(116,185,255,.18);
}
.kp-trip-date {
  margin-left: 6px; padding: 4px 8px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: 13px;
}

.kp-keys-dlg, .kp-lb {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.kp-keys-box {
  max-width: 360px; width: 100%; padding: 20px 22px; border-radius: 16px;
  background: #0c1829; color: #eee; border: 1px solid rgba(255,255,255,.12);
}
html.light .kp-keys-box { background: #fff; color: #222; }
.kp-keys-box h2 { margin: 0 0 12px; font-size: 16px; }
.kp-keys-box ul { margin: 0 0 16px; padding-left: 18px; font-size: 13.5px; line-height: 1.7; }
.kp-keys-box kbd {
  display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 11px;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06);
}
.kp-lb img { max-width: min(92vw, 960px); max-height: 86vh; border-radius: 8px; }
.kp-lb-x {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px;
  border-radius: 50%; border: 0; background: #0c1829; color: #fff; font-size: 22px; cursor: pointer;
}

.kp-anchor-btn {
  margin-left: 8px; opacity: 0; border: 0; background: transparent;
  color: var(--accent2, #74b9ff); cursor: pointer; font-size: 14px; font-weight: 700;
}
h2:hover .kp-anchor-btn, h3:hover .kp-anchor-btn, .kp-anchor-btn:focus { opacity: 1; }

.kp-phrase-acts { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.kp-speak {
  border: 1px solid var(--border); background: var(--surface); color: var(--text2);
  border-radius: 8px; padding: 2px 6px; cursor: pointer; font-size: 12px;
}

.kp-ux-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  z-index: 500; padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: #0c1829; color: #fff; border: 1px solid rgba(116,185,255,.35);
  opacity: 0; pointer-events: none; transition: .2s;
}
.kp-ux-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

.kp-oss-cred { font-size: 11px !important; opacity: .7; margin-top: 10px !important; }
.kp-oss-cred a { color: var(--accent2, #74b9ff); text-decoration: none; }

html.kp-compact .seo-ad,
html.kp-compact .kp-klook,
html.kp-compact .kp-topads { display: none !important; }
html.kp-compact .seo-body { font-size: 15px; }
html.kp-compact .kp-feat-rail { display: none; }

/* Wave 8 — NProgress theme */
#nprogress .bar {
  background: linear-gradient(90deg, var(--accent, #3b8eea), var(--accent2, #74b9ff)) !important;
  height: 2px !important;
}
#nprogress .peg { box-shadow: 0 0 8px var(--accent2, #74b9ff), 0 0 4px var(--accent, #3b8eea) !important; }
#nprogress .spinner { display: none !important; }

/* Tippy Guide theme */
.tippy-box[data-theme~='kp'] {
  background: #0c1829; color: #e8eef6; font-size: 12.5px; font-weight: 600;
  border-radius: 10px; border: 1px solid rgba(116,185,255,.28);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.tippy-box[data-theme~='kp'] .tippy-arrow { color: #0c1829; }
html.light .tippy-box[data-theme~='kp'] {
  background: #fff; color: #1a2a3a; border-color: rgba(30,100,180,.2);
}
html.light .tippy-box[data-theme~='kp'] .tippy-arrow { color: #fff; }

.kp-md-tip, .kp-md-block, .kp-md {
  max-width: 920px; margin: 12px auto; padding: 12px 16px;
  font-size: 13.5px; line-height: 1.55; color: var(--text2, #aab);
  border-radius: 12px; border: 1px solid rgba(116,185,255,.2);
  background: rgba(116,185,255,.06);
}
.kp-md-tip p, .kp-md p { margin: 0; }
.kp-md-tip strong, .kp-md strong { color: var(--accent2, #74b9ff); }

.kp-share-row { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 4px; vertical-align: middle; }
.kp-print-btn.kp-copied, .kp-anchor-btn.kp-copied { color: #7ddea0; border-color: rgba(125,222,160,.4); }

.kp-ext::after {
  content: '↗'; font-size: 0.7em; margin-left: 3px; opacity: .55;
  speak: never;
}

.kp-chip-copy {
  margin-left: 4px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text2); border-radius: 6px; padding: 0 5px; cursor: pointer; font-size: 11px;
}
a.kp-gl {
  display: inline-block; max-width: 100%; line-height: 0;
  border-radius: inherit;
}
a.kp-gl img { cursor: zoom-in; max-width: 100%; height: auto; }

.kp-reader-font { display: inline-flex; gap: 2px; margin-left: 4px; }
html.kp-reader-on .seo-body,
html.kp-reader-on article.seo-body,
html.kp-reader-on main.hub-content {
  font-size: calc(1rem * var(--kp-reader, 1));
}

.kp-resume-ux {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: 130; padding: 10px 16px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700;
  color: #fff; background: rgba(12,24,41,.94);
  border: 1px solid rgba(116,185,255,.35);
  box-shadow: 0 10px 28px rgba(0,0,0,.3);
}
html.light .kp-resume-ux { background: #fff; color: #1a5fa8; }

.kp-print-stamp { display: none; }
@media print {
  .kp-print-stamp {
    display: block !important; font-size: 10px; color: #444; margin-bottom: 12px;
    border-bottom: 1px solid #ccc; padding-bottom: 6px;
  }
  .kp-share-row, .kp-reader-font, .kp-resume, .kp-md-tip, .kp-chip-copy,
  .kp-anchor-btn, a.kp-gl::after { display: none !important; }
  article.seo-body h2 { break-before: page; }
  article.seo-body h2:first-of-type { break-before: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .kp-read-bar-fill, .kp-feat-card, .kp-ux-toast { transition: none !important; }
}

/* Print: article only */
@media print {
  .header, .hub-nav, .kp-tabbar, .kp-read-bar, .kp-top-fab, .kp-read-remain,
  .seo-ad, .kp-klook, .kp-topads, .kp-cookie-banner, .kp-pnav-burger,
  .kp-feat-rail, .kp-season-tip, .kp-trip-cd, .kp-print-btn, .map-hero,
  #kp-korea-now, .footer-links, .kp-hub-tools { display: none !important; }
  body, .seo-wrap, .hub-content { background: #fff !important; color: #111 !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 10px; color: #666; }
  a.kp-gl[href]::after { content: none; }
  .kp-dest-map, .kp-place-map { break-inside: avoid; }
}