/* Framer-Motion-style procedure guide — mirrors methodos-basic-procedure */
@font-face{font-family:NanumSquareNeo;src:url(./fonts/NanumSquareNeo-Lt.ttf)format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:NanumSquareNeo;src:url(./fonts/NanumSquareNeo-Rg.ttf)format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:NanumSquareNeo;src:url(./fonts/NanumSquareNeo-Bd.ttf)format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:NanumSquareNeo;src:url(./fonts/NanumSquareNeo-Eb.ttf)format("truetype");font-weight:800;font-display:swap}
@font-face{font-family:NanumMyeongjo;src:url(./fonts/NanumMyeongjo.ttf)format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:NanumMyeongjo;src:url(./fonts/NanumMyeongjoBold.ttf)format("truetype");font-weight:700;font-display:swap}

:root{
  --ink:#0b2c34;--ink-soft:#1e4650;--mist:#e8f2f1;--sea:#2f8f88;--sea-deep:#1f6b66;
  --sand:#d5e8e4;--line:#0b2c341f;--glow:#2f8f882e;
  --font-display:"NanumMyeongjo","Nanum Myeongjo",serif;
  --font-body:"NanumSquareNeo","Nanum Square Neo",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;color:var(--ink);font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1200px 600px at 10% -10%,#cfe8e4 0%,transparent 55%),
    radial-gradient(900px 500px at 100% 0,#b9d8d4 0%,transparent 50%),
    linear-gradient(165deg,#f4faf9 0%,#e7f1ef 45%,#dfeceb 100%);
}
button{font:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}

.page{max-width:1180px;margin:0 auto;padding:0 24px 64px}
.topbar{
  z-index:20;position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;
  padding:22px 0 8px;background:linear-gradient(#f4faf9f0,#f4faf9b8);backdrop-filter:blur(10px);
}
.topbar__brand{display:flex;align-items:center;gap:10px;font-weight:700;font-family:var(--font-display);font-size:1.05rem}
.topbar__brand img{width:28px;height:28px}
.topbar__back{font-size:.85rem;font-weight:700;color:var(--sea-deep)}

.hero{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:36px;padding:28px 0 36px}
.hero__kicker{letter-spacing:.12em;text-transform:uppercase;color:var(--sea-deep);margin:0 0 10px;font-size:12px;font-weight:700}
.hero__brand{font-family:var(--font-display);letter-spacing:-.02em;margin:0;font-size:clamp(2.2rem,5vw,3.4rem);font-weight:700;line-height:1.05}
.hero__title{color:var(--ink-soft);margin:14px 0 0;font-size:clamp(1.05rem,2vw,1.3rem);font-weight:400;line-height:1.55}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:10px;border:1px solid transparent;font-size:13px;font-weight:700;transition:transform .2s}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--ink);color:#f4fbf9}
.btn--ghost{border-color:var(--line);color:var(--ink);background:#ffffff8c}
.hero__panel{color:#e8f5f2;background:linear-gradient(160deg,#0b2c34f0,#1f5c72e6);border-radius:18px;padding:22px;display:grid;gap:12px}
.hero__pillar{background:#ffffff0f;border:1px solid #ffffff14;border-radius:12px;padding:14px 12px;display:grid;grid-template-columns:auto 1fr;gap:14px}
.hero__pillar-n{font-family:var(--font-display);color:#8fd4cb;font-size:1.2rem}
.hero__pillar strong{display:block;margin-bottom:2px;font-size:14px}
.hero__pillar span{opacity:.78;font-size:12px;line-height:1.45}

.proc{border:1px solid var(--line);background:#ffffffb8;border-radius:20px;margin:28px 0 56px;padding:28px 24px 32px}
.proc__head{max-width:48rem;margin-bottom:18px}
.proc__eyebrow{letter-spacing:.14em;text-transform:uppercase;margin:0;font-size:11px;font-weight:800;color:var(--sea-deep)}
.proc__title{font-family:var(--font-display);margin:8px 0 0;font-size:clamp(1.55rem,2.8vw,2rem)}
.proc__sub{color:#456066;margin:10px 0 0;font-size:14px;line-height:1.65}
.proc__shot-note{color:var(--sea-deep);margin:8px 0 0;font-size:12px;font-weight:700}
.proc__controls{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.proc__btn{background:var(--ink);color:#f4fbf9;border:0;border-radius:9px;padding:9px 14px;font-size:12px;font-weight:700}
.proc__btn--ghost{color:var(--ink-soft);border:1px solid var(--line);background:transparent}
.proc__rail{background:var(--sand);border-radius:999px;height:4px;overflow:hidden;margin-top:16px}
.proc__rail-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--sea),#1f5f8b);transition:width .45s ease}
.proc__numbers{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.proc__num{border:1px solid var(--line);color:#6a8186;width:40px;height:40px;font-size:12px;font-weight:800;font-family:var(--font-display);background:#fff;border-radius:10px}
.proc__num.is-done{background:var(--mist);color:var(--sea-deep)}
.proc__num.is-active{box-shadow:0 0 0 3px var(--glow);background:#fff;color:var(--ink)}

.proc__main{display:grid;grid-template-columns:1.55fr .85fr;align-items:start;gap:18px;margin-top:16px}
.proc__theater{border:1px solid var(--line);background:#0b2c34;border-radius:14px;overflow:hidden}
.proc__screen{width:100%;line-height:0;position:relative}
.proc__shot,.proc__mock{
  aspect-ratio:16/10;width:100%;height:auto;display:block;object-fit:cover;object-position:top left;background:#1a3a32;
}
.proc__mock{
  display:grid;grid-template-columns:160px 1fr;aspect-ratio:16/10;background:linear-gradient(160deg,#0c3d45,#124a63);
}
.proc__mock-rail{background:#071820;color:#e8fffb;padding:12px 10px;font-size:11px}
.proc__mock-rail strong{display:block;margin-bottom:8px;font-size:12px}
.proc__mock-rail span{display:block;padding:7px 8px;border-radius:7px;margin-bottom:3px;opacity:.75}
.proc__mock-rail span.is-on{background:rgba(255,255,255,.14);opacity:1;font-weight:800}
.proc__mock-main{background:#f7fbfa;padding:16px;color:var(--ink)}
.proc__mock-main h3{margin:0 0 6px;font-size:1rem}
.proc__mock-main p{margin:0;color:#526774;font-size:.88rem;line-height:1.5}
.proc__mock-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.proc__mock-chips i{font-style:normal;padding:5px 9px;border-radius:8px;background:rgba(23,129,117,.12);color:var(--sea-deep);font-size:11px;font-weight:700}

.proc__ticks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.proc__tick{
  text-align:left;width:100%;color:var(--ink);background:#ffffff8c;border:1px solid transparent;
  border-radius:10px;display:grid;grid-template-columns:34px 1fr;gap:8px;padding:10px 12px;font-size:12px;line-height:1.45;
}
.proc__tick.is-active{border-color:var(--line);box-shadow:0 0 0 2px var(--glow);background:#fff}
.proc__tick strong{font-family:var(--font-display);font-size:13px;display:block}

.hotspot{pointer-events:none;z-index:5;position:absolute;inset:0}
.hotspot__focus{
  border:2.5px solid #ffb020;border-radius:10px;position:absolute;transform:translate(-50%,-50%);
  box-shadow:0 0 0 9999px #06121673,0 0 0 3px #ffffffd9;width:10%;height:8%;
}
.hotspot__pin{z-index:30;width:72px;height:72px;position:absolute;transform:translate(-50%,-50%)}
.droplet{pointer-events:none;z-index:2;place-items:center;width:36px;height:36px;display:grid;position:absolute;top:-6px;left:50%;transform:translate(-50%)}
.droplet__ring{border:2.5px solid #ffb020f2;border-radius:50%;width:28px;height:28px;animation:1.35s ease-out infinite droplet-ripple;position:absolute}
.droplet__ring--2{border-color:#50d2ffe6;animation-delay:.28s}
.droplet__ring--3{border-color:#ffffffd9;animation-delay:.56s}
@keyframes droplet-ripple{0%{opacity:1;transform:scale(.35)}to{opacity:0;transform:scale(2.6)}}
.hotspot__badge{
  z-index:5;background:#ffb020;border:3px solid #fff;border-radius:999px;place-items:center;min-width:52px;height:52px;
  padding:0 8px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  box-shadow:0 0 0 3px #0b2c34,0 8px 20px #00000073;font-size:20px;font-weight:800;color:#111;
}
.hotspot__cursor{z-index:6;filter:drop-shadow(0 3px 5px #00000073);position:absolute;top:36px;left:42px;animation:1.25s ease-in-out infinite cursor-tap}
@keyframes cursor-tap{0%,100%{transform:translate(8px,8px)}45%{transform:translate(0,0)}55%{transform:translate(0,2px) scale(.92)}}
.hotspot__bubble{
  z-index:12;color:#fff;background:#0b2c34;border:2px solid #ffb020;border-radius:14px;max-width:min(360px,46%);
  padding:14px 16px 15px;line-height:1.45;position:absolute;box-shadow:0 16px 40px #00000073;
  animation:fadeUp .35s ease both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.hotspot__click-hint{letter-spacing:.06em;color:#ffb020;margin:0 0 6px;font-size:12px;font-weight:800}
.hotspot__action{margin:0;color:#fff;font-size:16px;font-weight:700;font-family:var(--font-display)}
.hotspot__menu{color:#c5dde0;margin:8px 0 0;font-size:12px}
.hotspot__menu span{color:#ffb020;background:#ffb02033;border-radius:4px;margin-right:6px;padding:2px 7px;font-size:11px;font-weight:800;display:inline-block}
.hotspot__detail{color:#e8f4f6;margin:8px 0 0;font-size:13px;line-height:1.55}

.foot{text-align:center;color:#6a8288;padding:12px 0 28px;font-size:12px}
@media (max-width:900px){
  .hero,.proc__main{grid-template-columns:1fr}
  .hotspot__bubble{max-width:78%}
}