/* Illustrated overview: its story scrolls independently of the bottom navigation. */
.kr-tour-entry { display:flex; align-items:stretch; gap:8px; flex:0 0 auto; margin:0; }
.kr-tour-entry .kr-tour-replay { min-height:46px; padding-inline:14px; white-space:nowrap; }
.kr-tour-replay { display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:.35rem .75rem; border:0; border-radius:12px; background:var(--kh-primary-50,#f3f2f6); color:var(--kh-primary-600,#5a4d7b); font:inherit; font-weight:700; cursor:pointer; }
.kr-tour-replay[hidden] { display:none; }
.kr-tour-replay>span { display:grid; place-items:center; width:1.35rem; height:1.35rem; border:1.5px solid currentColor; border-radius:50%; font-size:.85rem; }
.kr-tour-open { overflow:hidden; }
.kr-tour {
    --tour-primary:#5b4a8f; --tour-ink:#372a58; --tour-gold:#c6a56c;
    position:fixed; inset:0; box-sizing:border-box; width:min(960px,calc(100vw - 40px)); max-width:none;
    max-height:calc(100dvh - 48px); margin:auto; padding:0; border:1px solid #e1dbea; border-radius:26px;
    background:#fff; color:var(--tour-ink); font:inherit; overflow:hidden; box-shadow:0 24px 90px #25143f33;
}
.kr-tour::backdrop { background:#22143680; backdrop-filter:blur(5px); }
.kr-tour:not([open]) { display:none; }
.kr-tour__panel { display:flex; flex-direction:column; max-height:inherit; overflow:hidden; }
.kr-tour__header { position:relative; display:flex; flex-shrink:0; justify-content:flex-end; padding:12px 24px 10px; isolation:isolate; background:linear-gradient(110deg,#1d1540,#3b2a63); border-block-start:4px solid var(--tour-gold); }
.kr-tour__header::before { content:""; position:absolute; inset:0; z-index:-1; background:url("/images/Home/sadu-pattern.svg") left center / 70px 112px repeat; opacity:.24; mask-image:linear-gradient(90deg,#000,#0005); pointer-events:none; }
.kr-tour__close { display:grid; place-items:center; width:44px; height:44px; flex:0 0 44px; border:1px solid #e9e2f1; border-radius:50%; background:#ffffffed; color:#756585; font:inherit; font-size:1.4rem; cursor:pointer; }
.kr-tour__body { display:grid; grid-template-columns:1.12fr 1fr; align-items:center; gap:28px; min-height:0; padding:10px 24px 24px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.kr-tour__visual { position:relative; min-width:0; background:#f5f0f6; border:1px solid #ece2d4; border-radius:20px; overflow:hidden; isolation:isolate; }
.kr-tour__scene { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:contain; animation:kr-journey-in .35s ease-out; }
.kr-tour__scene-label { position:absolute; bottom:12px; inset-inline-start:12px; padding:5px 14px; border:1px solid #ffffff9c; border-radius:30px; background:#fffffff0; color:#51416c; font-size:.8rem; font-weight:750; box-shadow:0 3px 16px #372a580d; }
.kr-tour__content { min-width:0; text-align:start; }
.kr-tour__title { margin:0 0 12px; color:var(--tour-ink); font-size:1.7rem; font-weight:800; line-height:1.5; outline:none; }
.kr-tour__description { margin:0; color:#665d73; font-size:.94rem; line-height:1.9; overflow-wrap:anywhere; }
.kr-tour__result { display:grid; gap:5px; border-inline-start:3px solid var(--tour-gold); padding-inline-start:14px; margin-block:20px 16px; }
.kr-tour__result span { color:#8a7553; font-size:.74rem; }
.kr-tour__result strong { font-size:.92rem; line-height:1.7; font-weight:700; }
.kr-tour__context { margin:0; color:#8d8297; font-size:.72rem; line-height:1.7; }
.kr-tour__bottom { flex-shrink:0; padding:14px 24px 18px; background:linear-gradient(#faf8fd,#fff); border-block-start:1px solid #eee8f5; }
.kr-tour__progress { margin:0 0 10px; text-align:center; color:#81738f; font-size:.78rem; }
.kr-tour__steps { display:flex; gap:6px; list-style:none; margin:0; padding:0 0 16px; }
.kr-tour__steps li { flex:1; min-width:0; }
.kr-tour__steps button { width:100%; min-height:44px; padding:8px 4px; border:1px solid #e9e2f1; border-radius:10px; background:#fff; color:#756585; font:inherit; font-size:.78rem; cursor:pointer; }
.kr-tour__steps button[aria-current=step] { background:#ede7f7; border-color:#8b75b4; color:#47306d; font-weight:750; box-shadow:inset 0 -3px 0 var(--tour-gold); }
.kr-tour__actions { display:flex; gap:8px; margin-block:0 14px; }
.kr-tour__button { min-height:46px; padding:10px 22px; border:0; border-radius:12px; font:inherit; font-size:.9rem; font-weight:700; cursor:pointer; transition:background .15s; }
.kr-tour__button--primary { margin-inline-start:auto; order:2; min-width:160px; color:white; background:linear-gradient(110deg,#3b2a63,var(--tour-primary)); box-shadow:0 4px 10px #3b2a6315; }
.kr-tour__button--primary:hover { background:#47306d; }
.kr-tour__button--secondary { color:#726080; background:#eee8f5; }
.kr-tour__button[hidden] { display:none; }
.kr-tour__footer { display:flex; align-items:center; justify-content:space-between; gap:12px; border-block-start:1px solid #eee8f5; padding-block-start:10px; }
.kr-tour__footer label { display:flex; align-items:center; gap:8px; min-height:44px; color:#81738f; font-size:.78rem; line-height:1.5; cursor:pointer; }
.kr-tour__footer input { flex:0 0 auto; width:18px; height:18px; margin:0; accent-color:var(--tour-primary); }
.kr-tour__skip { min-height:44px; padding:4px 0; border:0; background:none; color:#756585; font:inherit; font-size:.78rem; cursor:pointer; }
.kr-tour__privacy { margin:5px 0 0; color:#91869c; font-size:.68rem; line-height:1.6; }
.kr-tour__privacy[hidden] { display:none; }
.kr-tour button:focus-visible,.kr-tour input:focus-visible,.kr-tour-replay:focus-visible { outline:3px solid #bca6dc; outline-offset:3px; }
@keyframes kr-journey-in { from { opacity:.5; transform:scale(.98); } to { opacity:1; transform:none; } }
@media(max-width:639px) {
    .kr-tools > .kr-tour-entry { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); flex:1 1 100%; width:100%; }
    .kr-tour-entry .kr-calculator,.kr-tour-entry .kr-tour-replay { min-width:0; justify-content:center; padding:8px 10px; white-space:normal; text-align:center; line-height:1.4; }
    .kr-tour-entry .kr-tour-replay { font-size:.85rem; }
    .kr-tour-entry:not(:has(.kr-calculator)) { grid-template-columns:minmax(0,1fr); }

    .kr-tour { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); border-radius:22px; }
    .kr-tour__header { padding:6px 14px; }
    .kr-tour__body { display:block; padding:8px 14px 18px; }
    .kr-tour__visual { width:100%; border-radius:16px; margin-block-end:14px; }
    .kr-tour__scene { max-height:min(30dvh,240px); object-fit:contain; }
    .kr-tour__scene-label { bottom:8px; inset-inline-start:8px; font-size:.7rem; padding:4px 10px; }
    .kr-tour__title { font-size:1.25rem; margin-bottom:6px; }
    .kr-tour__description { font-size:.88rem; line-height:1.8; }
    .kr-tour__result { margin-block:12px 10px; }
    .kr-tour__result strong { font-size:.85rem; }
    .kr-tour__context { font-size:.7rem; }
    .kr-tour__bottom { padding:10px 14px max(8px,env(safe-area-inset-bottom)); }
    .kr-tour__progress { font-size:.7rem; margin-bottom:8px; }
    .kr-tour__steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; padding-bottom:10px; }
    .kr-tour__steps button { font-size:.74rem; padding:6px 3px; }
    .kr-tour__actions { margin-bottom:8px; }
    .kr-tour__button { min-height:44px; font-size:.85rem; padding:8px 16px; }
    .kr-tour__button--primary { min-width:0; flex:1; }
    .kr-tour__footer { padding-block-start:4px; gap:8px; }
    .kr-tour__footer label,.kr-tour__skip { font-size:.7rem; }
}
@media(max-height:540px) and (min-width:640px) {
    .kr-tour__header { padding-block:4px; }
    .kr-tour__bottom { padding-block:8px; }
    .kr-tour__steps { padding-bottom:8px; }
    .kr-tour__actions { margin-bottom:6px; }
}
/* On very short/landscape screens, keep the entire story reachable rather than
   letting the fixed navigation consume all available reading space. */
@media(max-height:520px) {
    .kr-tour { overflow:auto; }
    .kr-tour__panel { display:block; max-height:none; overflow:visible; }
    .kr-tour__body { overflow:visible; }
}
@media(prefers-reduced-motion:reduce) {
    .kr-tour__scene { animation:none; }
    .kr-tour__button { transition:none; }
}