/* =========================================================
   Tabion Yurika 제품 페이지 — yurika_landing.html을 사이트 톤으로 옮긴 스타일
   · 모든 규칙은 .yk 안에서만 적용된다 (사이트 공통 스타일과 겹치지 않게)
   · 색: 인디고 → 네이비, 빨강 → 사이트 오렌지 / 그림자·유리 효과 제거 / 모서리 10px 이하
   · 반투명 포인트색은 color-mix(var(--blue))로 — 다른 제품 페이지는 --blue 등만 바꿔 같은 부품을 쓴다
   ========================================================= */

/* 좌우 슬라이드 틀·첫 화면은 사이트 공통 스타일(style.css)에 있다 */

.yk .yk-grid { max-width: none; }

/* 제목·본문 — 사이트 규격 */
.yk h2 {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.025em;
  word-break: keep-all;
}
.yk h2 .g { color: var(--blue); }
.yk h2 .r { color: var(--red-deep); }
.yk .sub { font-size: 17px; line-height: 1.75; }


/* 마지막 도입 안내 */
.yk-cta { text-align: center; }
.yk-cta .cta-wrap { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.yk-cta .cta-actions { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* 모바일: 원본처럼 세로로 쌓는다 */
@media (max-width: 900px) {
  .yk .yk-grid { grid-template-columns: 1fr; gap: 32px; }
  .yk .col-viz { order: 2; }
  .yk .ucgrid { grid-template-columns: 1fr; }
}

.yk{
    /* Yurika brand — indigo primary + eureka red accent */
    --blue:#164A73; --blue-deep:#0f2440; --blue-mid:#2c4a70;
    --sky:#8fa5bd; --sky-tint:#f1f4f8; --sky-2:#dfe5ec;
    --red:#ff5a1f; --red-deep:#e14a12; --red-tint:#fff1ea;
    --ink:#0a0a0a; --ink-2:#6b6b6b; --ink-3:#a3a3a3;
    --line:#e2e2e2; --line-strong:#cfcfcf;
    --bg:#FFFFFF; --card-bg:#FFFFFF; --card-active-bg:#f1f4f8;
    --font:var(--font-sans);
    --nav-h:64px; --foot-h:52px; --edge:clamp(20px,4vw,56px);
    --glass-fill:rgba(255,255,255,.62);
    --glass-fill-strong:rgba(255,255,255,.74);
    --glass-grad:#fff;
    --card-shadow:none;
    --card-shadow-sm:none;
    --card-border:var(--line);
    --page-grad:#fff;
    --ease:cubic-bezier(.6,.02,.2,1);
  }
.yk .yk-grid{width:100%;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,72px);align-items:center}
.yk .col-text{min-width:0}
.yk .col-viz{min-width:0;position:relative}
.yk .eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:16px;display:inline-flex;align-items:center;gap:8px}
.yk .eyebrow::before{content:"";width:22px;height:1.5px;background:currentColor}
.yk .eyebrow.red{color:var(--red-deep)}
.yk .badge-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 12px;border-radius:100px;background:color-mix(in srgb,var(--blue) 8%,transparent);border:1px solid color-mix(in srgb,var(--blue) 20%,transparent);color:var(--blue-deep);font-size:13px;font-weight:600;letter-spacing:-.01em;margin-bottom:18px}
.yk .badge-pill.red{background:var(--red-tint);border-color:rgba(255,90,31,.24);color:var(--red-deep)}
.yk .badge-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(255,90,31,.16);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.6)}}
.yk .sub{margin-top:22px;font-size:clamp(14px,1.3vw,17px);color:var(--ink-2);line-height:1.7;font-weight:400;max-width:42ch}
.yk .sub b{color:var(--ink);font-weight:700}
.yk .sub .hl{color:var(--blue-deep);font-weight:700}
.yk .points{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.yk .pt{display:flex;gap:13px;align-items:flex-start}
.yk .pt .ico{flex:none;width:34px;height:34px;border-radius:10px;background:var(--sky-tint);border:1px solid var(--sky-2);display:flex;align-items:center;justify-content:center;color:var(--blue)}
.yk .pt .ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.yk .pt .tx b{display:block;font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.4}
.yk .pt .tx span{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-top:3px}
.yk .vcard{width:100%;min-width:0;border:1px solid var(--card-border);border-radius:10px;background:var(--glass-grad);box-shadow:var(--card-shadow);padding:22px;box-sizing:border-box;position:relative;overflow:hidden}
.yk .vcard .glow{position:absolute;width:180px;height:180px;border-radius:50%;filter:blur(4px);pointer-events:none}
.yk .vcard .glow.a{right:-50px;bottom:-50px;background:radial-gradient(circle,color-mix(in srgb,var(--blue) 16%,transparent),transparent 70%)}
.yk .vcard .glow.b{left:-40px;top:-40px;background:radial-gradient(circle,rgba(255,90,31,.12),transparent 70%)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.yk .win{border:1px solid var(--card-border);border-radius:10px;background:linear-gradient(160deg,#fff,#f7f7f7);box-shadow:var(--card-shadow);overflow:hidden}
.yk .win-bar{height:38px;display:flex;align-items:center;gap:7px;padding:0 14px;background:linear-gradient(180deg,#f5f5f5,#efefef);border-bottom:1px solid var(--line)}
.yk .win-bar .tl{width:11px;height:11px;border-radius:50%}
.yk .win-bar .tl.r{background:#ff5f57}
.yk .win-bar .tl.y{background:#febc2e}
.yk .win-bar .tl.g{background:#28c840}
.yk .win-bar .wt{margin-left:10px;font-size:11.5px;font-weight:700;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.yk .win-bar .wt img{height:17px;width:auto}
.yk .win-body{display:flex;min-height:288px}
.yk .win-side{flex:none;width:138px;border-right:1px solid var(--line);background:#fafafa;padding:12px 9px;display:flex;flex-direction:column;gap:4px}
.yk .win-side .si{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--ink-2);padding:8px 9px;border-radius:8px}
.yk .win-side .si.on{background:var(--blue);color:#fff}
.yk .win-side .si .d{width:7px;height:7px;border-radius:2px;background:currentColor;opacity:.7}
.yk .win-side .si.on .d{opacity:1}
.yk .win-side .folder{margin-top:auto;font-size:10.5px;color:var(--ink-3);border:1px dashed var(--line-strong);border-radius:8px;padding:8px;line-height:1.5;word-break:break-all;overflow-wrap:anywhere}
.yk .win-side .folder b{color:var(--blue-deep);display:block;font-size:11px}
.yk .win-main{flex:1;min-width:0;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.yk .prompt{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:12.5px;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(10,10,10,.06)}
.yk .prompt .cur{color:var(--blue)}
.yk .prompt .caret{width:2px;height:15px;background:var(--blue);animation:blink 1s step-end infinite;margin-left:1px}
@keyframes blink{50%{opacity:0}}
.yk .runsteps{display:flex;flex-direction:column;gap:9px;margin-top:2px}
.yk .rs{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-2);opacity:.35;transition:.3s}
.yk .rs .tick{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-strong);flex:none;position:relative;background:#fff;transition:.3s}
.yk .rs .tick .sp{position:absolute;inset:2px;border-radius:50%;border:2px solid var(--sky-2);border-top-color:var(--blue);animation:spin .8s linear infinite;display:none}
.yk .rs .tick .ck{position:absolute;left:4px;top:2px;width:4px;height:8px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg) scale(0);transition:.25s}
@keyframes spin{to{transform:rotate(360deg)}}
.yk .rs.active{opacity:1}
.yk .rs.active .tick .sp{display:block}
.yk .rs.done{opacity:1}
.yk .rs.done .tick{background:var(--blue);border-color:var(--blue)}
.yk .rs.done .tick .sp{display:none}
.yk .rs.done .tick .ck{transform:rotate(45deg) scale(1)}
.yk .rs b{color:var(--ink);font-weight:700}
.yk .result{margin-top:4px;display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;color:var(--blue-deep);background:#fff;border:1px solid var(--sky);border-radius:10px;padding:10px 12px;opacity:0;transform:translateY(8px);transition:.4s}
.yk .result.show{opacity:1;transform:none}
.yk .result .thumb{width:34px;height:26px;border-radius:5px;background:linear-gradient(135deg,var(--blue),var(--sky));flex:none;position:relative;overflow:hidden}
.yk .result .thumb::after{content:"";position:absolute;left:5px;right:5px;top:6px;height:2px;background:rgba(255,255,255,.85);box-shadow:0 5px 0 rgba(255,255,255,.6),0 10px 0 rgba(255,255,255,.4)}
.yk .filetree{background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px 16px;box-shadow:var(--card-shadow-sm);font-size:12.5px}
.yk .filetree .ft-h{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--blue-deep);margin-bottom:10px}
.yk .frow{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;color:var(--ink-2);position:relative}
.yk .frow .fi{width:15px;height:15px;flex:none;color:var(--ink-3)}
.yk .frow .fi svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8}
.yk .frow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yk .frow .tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;background:var(--sky-tint);color:var(--blue);opacity:0;transform:translateX(6px);transition:.3s}
.yk .frow.read{background:var(--sky-tint)}
.yk .frow.read .fi{color:var(--blue)}
.yk .frow.read .tag{opacity:1;transform:none}
.yk .cmpbar{display:flex;gap:12px;margin-top:14px}
.yk .cmpbar .cb{flex:1;border-radius:8px;padding:13px;border:1px solid var(--line);text-align:center;background:#fff}
.yk .cmpbar .cb.no{background:var(--red-tint);border-color:rgba(255,90,31,.2)}
.yk .cmpbar .cb.yes{background:var(--sky-tint);border-color:var(--sky)}
.yk .cmpbar .cb .lab{font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--ink-3);text-transform:uppercase}
.yk .cmpbar .cb .v{font-size:14px;font-weight:700;margin-top:6px;letter-spacing:-.01em}
.yk .cmpbar .cb.no .v{color:var(--red-deep)}
.yk .cmpbar .cb.yes .v{color:var(--blue-deep)}
.yk .gengrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.yk .gg{border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:var(--card-shadow-sm);padding:16px 12px;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;opacity:0;transform:translateY(12px) scale(.96);animation:pop .5s var(--ease) forwards}
.yk .gg:nth-child(1){animation-delay:.1s}
.yk .gg:nth-child(2){animation-delay:.2s}
.yk .gg:nth-child(3){animation-delay:.3s}
.yk .gg:nth-child(4){animation-delay:.4s}
.yk .gg:nth-child(5){animation-delay:.5s}
.yk .gg:nth-child(6){animation-delay:.6s}
@keyframes pop{to{opacity:1;transform:none}}
.yk .gg .ft{width:40px;height:48px;border-radius:6px;position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:7px;font-size:11px;font-weight:700;color:#fff;letter-spacing:-.02em;box-shadow:0 5px 14px rgba(10,10,10,.16)}
.yk .gg .ft::before{content:"";position:absolute;top:0;right:0;border-width:0 12px 12px 0;border-style:solid;border-color:rgba(255,255,255,.55) #fff}
.yk .ft.ppt{background:linear-gradient(160deg,#E8543B,#C7381F)}
.yk .ft.xls{background:linear-gradient(160deg,#1E9E63,#12703F)}
.yk .ft.doc{background:linear-gradient(160deg,#2B6CE8,#1B49B0)}
.yk .ft.hwp{background:linear-gradient(160deg,#0FA5C7,#0A7085)}
.yk .ft.pdf{background:linear-gradient(160deg,#F5140C,#C70E08)}
.yk .ft.mp4{background:linear-gradient(160deg,#6A50E8,#3E2CB0)}
.yk .gg .nm{font-size:12px;font-weight:700;color:var(--ink)}
.yk .gg .ds{font-size:10.5px;color:var(--ink-3);line-height:1.4}
.yk .gg .soon{font-size:9px;font-weight:700;color:var(--red-deep);background:var(--red-tint);border-radius:10px;padding:2px 7px;letter-spacing:.02em}
.yk .code{background:#111418;border:1px solid #2a2e35;border-radius:10px;overflow:hidden;box-shadow:var(--card-shadow)}
.yk .code-bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 13px;background:#1a1d22;border-bottom:1px solid #2a2e35}
.yk .code-bar .tl{width:10px;height:10px;border-radius:50%}
.yk .code-bar .r{background:#ff5f57}
.yk .code-bar .y{background:#febc2e}
.yk .code-bar .g{background:#28c840}
.yk .code-bar .fn{margin-left:8px;font-size:11px;color:#8a9099;font-weight:600;font-family:'SF Mono',ui-monospace,monospace}
.yk .code-body{padding:14px 16px;font-family:'SF Mono',ui-monospace,'Menlo',monospace;font-size:12px;line-height:1.75;color:#d0d4da;min-height:150px}
.yk .code-body .ln{display:block;white-space:nowrap;opacity:0;animation:typeln .4s var(--ease) forwards}
.yk .code-body .ln:nth-child(1){animation-delay:.2s}
.yk .code-body .ln:nth-child(2){animation-delay:.5s}
.yk .code-body .ln:nth-child(3){animation-delay:.8s}
.yk .code-body .ln:nth-child(4){animation-delay:1.1s}
.yk .code-body .ln:nth-child(5){animation-delay:1.4s}
.yk .code-body .ln:nth-child(6){animation-delay:1.7s}
@keyframes typeln{to{opacity:1}}
.yk .code-body .c{color:#6b727c}
.yk .code-body .k{color:#ff9d8a}
.yk .code-body .s{color:#8ce6b0}
.yk .code-body .f{color:#8ab6ff}
.yk .code-body .n{color:#f5c86b}
.yk .models{margin-top:14px;display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.yk .models .ml{font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:.02em;margin-right:2px}
.yk .mchip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink-2);background:#fff;border:1px solid var(--line-strong);border-radius:10px;padding:7px 13px;transition:.35s}
.yk .mchip .md{width:8px;height:8px;border-radius:50%;background:var(--line-strong);transition:.35s}
.yk .mchip.on{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 8px 20px color-mix(in srgb,var(--blue) 28%,transparent)}
.yk .mchip.on .md{background:#fff}
.yk .netdiag{display:flex;align-items:stretch;gap:0;position:relative}
.yk .zone{flex:1;border-radius:10px;padding:16px 14px;position:relative;display:flex;flex-direction:column;gap:10px}
.yk .zone.closed{background:linear-gradient(160deg,#f3f5f8,#eceff3);border:1px solid var(--sky-2)}
.yk .zone.gate{flex:0 0 92px;background:linear-gradient(180deg,#fff,#f7f7f7);border:1px solid var(--line-strong);align-items:center;justify-content:center;text-align:center}
.yk .zone.net{background:linear-gradient(160deg,#fff,#f7f7f7);border:1px solid var(--line)}
.yk .zone .zt{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.yk .zone.closed .zt{color:var(--blue-deep)}
.yk .node{background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 10px;font-size:11.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;box-shadow:0 1px 2px rgba(10,10,10,.06)}
.yk .node .ni{width:22px;height:22px;border-radius:6px;background:var(--sky-tint);color:var(--blue);display:flex;align-items:center;justify-content:center;flex:none}
.yk .node .ni svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.yk .node small{display:block;font-size:10px;font-weight:500;color:var(--ink-3);margin-top:1px}
.yk .gate .gi{width:40px;height:40px;border-radius:8px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:8px;box-shadow:0 8px 18px color-mix(in srgb,var(--blue) 30%,transparent)}
.yk .gate .gi svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
.yk .gate .gl{font-size:10.5px;font-weight:700;color:var(--blue-deep);line-height:1.3}
.yk .gate .gs{font-size:9px;color:var(--ink-3);margin-top:3px;line-height:1.3}
.yk .flow{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(255,90,31,.18);z-index:3}
.yk .flow.f1{left:calc(50% - 55px);animation:flowR 3.4s var(--ease) infinite}
.yk .flow.f2{right:calc(50% - 55px);background:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 18%,transparent);animation:flowL 3.4s var(--ease) 1.7s infinite}
@keyframes flowR{0%{transform:translate(-38px,-50%);opacity:0}15%{opacity:1}50%{transform:translate(38px,-50%);opacity:1}65%,100%{opacity:0}}
@keyframes flowL{0%{transform:translate(38px,-50%);opacity:0}15%{opacity:1}50%{transform:translate(-38px,-50%);opacity:1}65%,100%{opacity:0}}
.yk .seclist{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.yk .sectag{font-size:11.5px;font-weight:700;color:var(--blue-deep);background:#fff;border:1px solid var(--sky-2);border-radius:8px;padding:7px 11px;display:flex;align-items:center;gap:6px}
.yk .sectag .cc{width:14px;height:14px;border-radius:50%;background:var(--blue);position:relative;flex:none}
.yk .sectag .cc::after{content:"";position:absolute;left:4.5px;top:2.5px;width:3px;height:6px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg)}
.yk .vs{display:grid;grid-template-columns:1.3fr .9fr .9fr;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;box-shadow:var(--card-shadow)}
.yk .vs .cell{padding:15px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;font-size:13px}
.yk .vs .r:last-child .cell{border-bottom:none}
.yk .vs .hd{background:#f7f7f7;font-weight:700;color:var(--ink);font-size:12.5px}
.yk .vs .hd.yur{background:var(--blue);color:#fff;flex-direction:column;align-items:flex-start;gap:2px}
.yk .vs .hd.yur small{font-size:10px;font-weight:600;opacity:.85}
.yk .vs .hd.cla{background:#f3f3f3;color:var(--ink-2);flex-direction:column;align-items:flex-start;gap:2px}
.yk .vs .hd.cla small{font-size:10px;font-weight:500;color:var(--ink-3)}
.yk .vs .feat{font-weight:700;color:var(--ink);letter-spacing:-.01em}
.yk .vs .mid{justify-content:center}
.yk .vs .yn{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.yk .vs .yn.ok{background:var(--blue);color:#fff}
.yk .vs .yn.x{background:var(--red-tint);color:var(--red-deep)}
.yk .vs .colhi{background:color-mix(in srgb,var(--blue) 4%,transparent)}
.yk .ucgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.yk .uc{border:1px solid var(--line);border-radius:10px;background:var(--glass-grad);box-shadow:var(--card-shadow-sm);padding:15px 15px;display:flex;gap:12px;align-items:flex-start;transition:.25s}
.yk .uc:hover{border-color:var(--sky);transform:translateY(-2px)}
.yk .uc .ui{flex:none;width:38px;height:38px;border-radius:8px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center}
.yk .uc .ui svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.yk .uc b{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.35;display:block}
.yk .uc span{font-size:12px;color:var(--ink-2);line-height:1.5;margin-top:3px;display:block}
.yk .cta-wrap{max-width:920px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.yk .cta-actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.yk .statband{margin-top:40px;display:flex;gap:clamp(24px,5vw,64px);flex-wrap:wrap;justify-content:center}
.yk .stat{display:flex;flex-direction:column;align-items:center}
.yk .stat .n{font-size:clamp(28px,3.4vw,44px);font-weight:700;color:var(--blue-deep);letter-spacing:-.03em;line-height:1}
.yk .stat .n .r{color:var(--red)}
.yk .stat .n.feat-n{font-size:clamp(15px,1.7vw,23px)}
.yk .stat .l{font-size:12.5px;color:var(--ink-2);margin-top:8px;font-weight:600}
.yk .cta-note{margin-top:30px;font-size:12.5px;color:var(--ink-3);line-height:1.6}
.yk .cta-note b{color:var(--red-deep);font-weight:700}
.yk .full-head{text-align:center;max-width:840px;margin:0 auto 26px}
.yk .pipe{display:flex;align-items:stretch;gap:8px}
.yk .pstep{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.yk .pnum{font-size:11px;font-weight:700;color:var(--blue);letter-spacing:.08em}
.yk .pcard{width:100%;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:var(--card-shadow-sm);padding:13px 11px;min-height:122px;display:flex;flex-direction:column;gap:9px;align-items:center;justify-content:flex-start}
.yk .pttl{font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.yk .parrow{align-self:center;color:var(--sky);font-weight:700;font-size:18px;flex:none;animation:pnudge 2s var(--ease) infinite}
.yk .parrow:nth-of-type(2){animation-delay:.4s}
@keyframes pnudge{0%,100%{transform:translateX(0);opacity:.5}50%{transform:translateX(3px);opacity:1}}
.yk .plabel{font-size:11px;color:var(--ink-2);text-align:center;line-height:1.4}
.yk .sbrows{width:100%;display:flex;flex-direction:column;gap:6px;margin-top:2px}
.yk .sbrows span{height:11px;border-radius:4px;background:var(--sky-tint);border:1px solid var(--sky-2)}
.yk .sbrows span:nth-child(1){width:100%}
.yk .sbrows span:nth-child(2){width:82%}
.yk .sbrows span:nth-child(3){width:60%}
.yk .slgrades{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.yk .slgrades .gd{font-size:9px;font-weight:700;color:var(--ink-3);background:#f3f3f3;border-radius:10px;padding:2px 7px}
.yk .slgrades .gd.on{background:var(--blue);color:#fff}
.yk .slmock{width:100%;height:38px;border-radius:6px;background:linear-gradient(135deg,var(--blue),var(--sky));position:relative;overflow:hidden;margin-top:2px}
.yk .slmock::after{content:"";position:absolute;left:7px;right:42%;top:9px;height:3px;background:rgba(255,255,255,.9);box-shadow:0 7px 0 rgba(255,255,255,.55),0 13px 0 rgba(255,255,255,.4)}
.yk .vplay{width:100%;height:64px;border-radius:8px;background:linear-gradient(135deg,#2a2e35,#111418);display:flex;align-items:center;justify-content:center;margin-top:2px;position:relative}
.yk .vplay::after{content:"";position:absolute;left:8px;bottom:7px;right:8px;height:3px;border-radius:2px;background:rgba(255,255,255,.25)}
.yk .vplay .tri{width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;margin-left:3px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}
.yk .minostat{display:flex;gap:26px;margin-top:26px}
.yk .minostat .ms .n{font-size:clamp(26px,3vw,40px);font-weight:700;color:var(--blue-deep);letter-spacing:-.03em;line-height:1}
.yk .minostat .ms .n .u{font-size:.55em;color:var(--red)}
.yk .minostat .ms .l{font-size:12px;color:var(--ink);margin-top:7px;font-weight:700;line-height:1.3}
.yk .minostat .ms .s{font-size:11px;color:var(--ink-3);margin-top:2px;line-height:1.3}
.yk .fullwrap{width:100%;max-width:1120px;margin:0 auto}
.yk .probrow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.yk .prob{border:1px solid var(--line);border-radius:10px;background:var(--glass-grad);box-shadow:var(--card-shadow-sm);padding:24px 22px}
.yk .prob .pn{font-size:32px;font-weight:700;color:var(--red-deep);letter-spacing:-.02em;line-height:1}
.yk .prob .ph{font-size:17px;font-weight:700;color:var(--ink);margin:12px 0;letter-spacing:-.01em}
.yk .prob ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.yk .prob li{font-size:13px;color:var(--ink-2);line-height:1.5;padding-left:14px;position:relative}
.yk .prob li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--red);opacity:.55}
.yk .qbar{margin-top:24px;text-align:center;font-size:15px;font-weight:700;color:var(--blue-deep);background:var(--sky-tint);border:1px solid var(--sky-2);border-radius:8px;padding:16px 20px;letter-spacing:-.01em}
.yk .qbar b{color:var(--red-deep)}
.yk .cmptable{border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--card-shadow);background:#fff;font-size:13.5px}
.yk .cmptable .cr{display:grid;grid-template-columns:1fr 1.4fr 1.7fr;border-bottom:1px solid var(--line)}
.yk .cmptable .cr:last-child{border-bottom:none}
.yk .cmptable .cc{padding:12px 16px;display:flex;align-items:center;line-height:1.4}
.yk .cmptable .cr.h .cc{font-weight:700;font-size:13px;color:#fff;background:var(--blue-deep)}
.yk .cmptable .cr.h .cc.y{background:var(--blue)}
.yk .cmptable .it{font-weight:700;color:var(--ink);background:#f7f7f7}
.yk .cmptable .old{color:var(--ink-3)}
.yk .cmptable .yur{color:var(--blue-deep);font-weight:600;background:color-mix(in srgb,var(--blue) 4%,transparent)}
.yk .arch{display:flex;flex-direction:column;gap:13px}
.yk .archrow{display:flex;align-items:stretch;gap:10px}
.yk .internal{flex:1;border:1px solid var(--sky-2);border-radius:10px;background:linear-gradient(160deg,#f3f5f8,#eceff3);padding:13px;min-width:0}
.yk .zl{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;margin-bottom:10px}
.yk .internal .zl{color:var(--blue-deep)}
.yk .aflow{display:flex;align-items:center;gap:7px}
.yk .anode{flex:1;min-width:0;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 8px;text-align:center;box-shadow:0 1px 2px rgba(10,10,10,.06)}
.yk .anode.brain{background:var(--blue-deep);border-color:var(--blue-deep)}
.yk .anode .at{font-size:11.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.yk .anode.brain .at{color:#fff}
.yk .anode .as{font-size:9px;color:var(--ink-3);margin-top:3px;line-height:1.3}
.yk .anode.brain .as{color:var(--sky)}
.yk .aarrow{color:var(--sky);font-weight:700;flex:none;font-size:15px;align-self:center;display:flex;align-items:center;animation:archFlow 1.8s var(--ease) infinite}
@keyframes archFlow{0%,100%{transform:translateX(-1px);opacity:.5}50%{transform:translateX(2px);opacity:1}}
.yk .dmz{flex:0 0 120px;border:1px dashed #d9a441;border-radius:10px;background:#fdf6e9;padding:13px 10px;text-align:center}
.yk .dmz .zl{color:#b07d1e}
.yk .dmz .relay{background:#fff;border:1px solid #e6c583;border-radius:9px;padding:9px 7px;font-size:11px;font-weight:700;color:var(--ink)}
.yk .dmz .relay small{display:block;font-size:9px;color:#b07d1e;font-weight:700;margin-top:2px}
.yk .dmz .ext{margin-top:9px;font-size:10.5px;color:var(--ink-3);font-weight:600}
.yk .achk{display:flex;gap:12px;margin-top:2px}
.yk .achk .ac{flex:1;font-size:11px;color:var(--ink-2);line-height:1.4;padding-left:17px;position:relative}
.yk .achk .ac::before{content:"✓";position:absolute;left:0;top:0;color:var(--blue);font-weight:700}
.yk .achk .ac b{color:var(--ink);display:block;font-size:11.5px;margin-bottom:1px}
.yk .cfg{display:flex;flex-direction:column;gap:12px}
.yk .cfgc{border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:var(--card-shadow-sm);padding:16px 18px}
.yk .cfgc.on{border-color:var(--blue);background:var(--sky-tint)}
.yk .cfgc .ct{font-size:15px;font-weight:700;color:var(--blue-deep);letter-spacing:-.01em}
.yk .cfgc .cd{font-size:12.5px;color:var(--ink-2);line-height:1.55;margin-top:6px}
.yk .mgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.yk .mg{border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:var(--card-shadow-sm);padding:13px 15px;font-size:13.5px;font-weight:700;color:var(--ink)}
.yk .mg.int{border-color:var(--sky);background:var(--sky-tint);color:var(--blue-deep)}
.yk .mg small{display:block;font-size:10.5px;color:var(--ink-3);font-weight:500;margin-top:2px}
.yk .mgrid .mnote{grid-column:1/-1;font-size:11px;color:var(--ink-3);margin-top:2px}
.yk .gwdiag{display:flex;flex-direction:column;gap:13px}
.yk .gwin{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.yk .gwin span{font-size:11.5px;font-weight:600;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 10px;text-align:center}
.yk .gwbox{background:var(--blue-deep);border-radius:10px;padding:16px;text-align:center}
.yk .gwbox .gt{font-size:16px;font-weight:700;color:#fff}
.yk .gwbox .gsub{font-size:11px;color:var(--sky);margin-top:3px}
.yk .gwpill{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.yk .gwpill span{font-size:11px;font-weight:700;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:5px 11px}
.yk .gwout{text-align:center;font-size:12px;font-weight:700;color:var(--blue-deep);background:var(--sky-tint);border:1px solid var(--sky);border-radius:10px;padding:11px}
.yk .gwarrow{text-align:center;color:var(--sky);font-weight:700;font-size:16px;line-height:.6}
.yk .govcols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.yk .govc{border:1px solid var(--line);border-radius:10px;background:var(--glass-grad);box-shadow:var(--card-shadow-sm);padding:16px 16px 16px 44px}
.yk .govc .gh{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:10px}
.yk .govc ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.yk .govc li{font-size:12px;color:var(--ink-2);line-height:1.45;padding-left:13px;position:relative}
.yk .govc li::before{content:"";position:absolute;left:0;top:7px;width:4px;height:4px;border-radius:50%;background:var(--blue)}
.yk .govstrip{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.yk .govstrip span{font-size:11.5px;font-weight:700;color:var(--blue-deep);background:#fff;border:1px solid var(--sky-2);border-radius:8px;padding:7px 11px}
.yk .chatm{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--card-shadow);overflow:hidden}
.yk .chatm .cq{background:var(--sky-tint);padding:12px 15px;font-size:13px;font-weight:700;color:var(--blue-deep)}
.yk .chatm .ca{padding:14px 15px;font-size:12.5px;color:var(--ink-2);line-height:1.6}
.yk .chatm .src{margin-top:11px;display:flex;flex-direction:column;gap:6px}
.yk .chatm .src .s{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--blue-deep);background:var(--sky-tint);border:1px solid var(--sky-2);border-radius:8px;padding:7px 10px;font-weight:600}
.yk .chatm .src .s .d{width:13px;height:15px;border-radius:2px;background:var(--blue);flex:none}
.yk .vglabel{font-size:12px;font-weight:700;color:var(--blue-deep);margin-bottom:11px;letter-spacing:-.01em}
.yk .vgdiv{height:1px;background:var(--line);margin:18px 0 15px}
.yk .docchips{display:flex;gap:9px;margin-top:0}
.yk .docchips span{flex:1;text-align:center;font-size:12px;font-weight:700;border-radius:10px;padding:11px 6px;letter-spacing:-.01em}
.yk .docchips .hwp{background:var(--sky-tint);border:1px solid var(--sky);color:var(--blue-deep)}
.yk .docchips .etc{background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.yk .stepbar{display:flex;gap:8px;margin-top:30px;flex-wrap:wrap;justify-content:center}
.yk .stepbar .stp{font-size:12.5px;font-weight:700;color:var(--ink-2);background:#fff;border:1px solid var(--line-strong);border-radius:9px;padding:10px 16px}
.yk .stepbar .stp.on{background:var(--sky-tint);border-color:var(--sky);color:var(--blue-deep)}
.yk .minostat{justify-content:flex-start}
.yk .minostat .ms{text-align:center}
.yk .minostat .ms .n .u{color:var(--blue-deep)}
.yk .internal{padding:16px}
.yk .anode{padding:12px 10px}
.yk .anode .at{font-size:13px}
.yk .anode .as{font-size:10.5px}
.yk .dmz{flex:0 0 132px;padding:16px 12px}
.yk .dmz .relay{font-size:12px;padding:11px 9px}
.yk .dmz .relay small{font-size:10px}
.yk .dmz .ext{font-size:11.5px}
.yk .achk .ac{font-size:12px}
.yk .achk .ac b{font-size:12.5px}
@keyframes nodeFlow{0%,100%{box-shadow:0 1px 2px rgba(10,10,10,.06)}10%{box-shadow:0 0 0 2px var(--sky),0 8px 18px color-mix(in srgb,var(--blue) 18%,transparent)}26%{box-shadow:0 1px 2px rgba(10,10,10,.06)}}
.yk .aflow .anode{animation:nodeFlow 5s var(--ease) infinite}
.yk .aflow .anode:nth-child(3){animation-delay:.7s}
.yk .aflow .anode:nth-child(5){animation-delay:1.4s}
@keyframes cardLift{0%,100%{transform:translateY(0);border-color:var(--line);box-shadow:var(--card-shadow-sm)}9%{transform:translateY(-7px);border-color:var(--blue);box-shadow:0 14px 28px color-mix(in srgb,var(--blue) 20%,transparent)}24%{transform:translateY(0);border-color:var(--line);box-shadow:var(--card-shadow-sm)}}
.yk .probrow .prob{animation:cardLift 6s var(--ease) infinite}
.yk .probrow .prob:nth-child(2){animation-delay:.7s}
.yk .probrow .prob:nth-child(3){animation-delay:1.4s}
@keyframes cfgToggle{0%,42%{border-color:var(--blue);background:var(--sky-tint);transform:translateY(-2px);box-shadow:0 10px 22px color-mix(in srgb,var(--blue) 15%,transparent)}54%,100%{border-color:var(--line);background:#fff;transform:none;box-shadow:var(--card-shadow-sm)}}
.yk .cfg .cfgc{animation:cfgToggle 4.4s var(--ease) infinite}
.yk .cfg .cfgc:nth-child(2){animation-delay:2.2s}
@keyframes mgScan{0%,100%{box-shadow:var(--card-shadow-sm);transform:none}10%{box-shadow:0 12px 24px color-mix(in srgb,var(--blue) 20%,transparent);transform:translateY(-4px)}26%{box-shadow:var(--card-shadow-sm);transform:none}}
.yk .mgrid .mg{animation:mgScan 6s var(--ease) infinite}
.yk .mgrid .mg:nth-child(2){animation-delay:.5s}
.yk .mgrid .mg:nth-child(3){animation-delay:1s}
.yk .mgrid .mg:nth-child(4){animation-delay:1.5s}
.yk .mgrid .mg:nth-child(5){animation-delay:2s}
.yk .mgrid .mg:nth-child(6){animation-delay:2.5s}
@keyframes pillGlow{0%,100%{background:rgba(255,255,255,.12);transform:none}12%{background:rgba(255,255,255,.34);transform:translateY(-2px)}30%{background:rgba(255,255,255,.12);transform:none}}
.yk .gwpill span{animation:pillGlow 5s var(--ease) infinite}
.yk .gwpill span:nth-child(2){animation-delay:.4s}
.yk .gwpill span:nth-child(3){animation-delay:.8s}
.yk .gwpill span:nth-child(4){animation-delay:1.2s}
@keyframes arrowY{0%,100%{opacity:.45;transform:translateY(-2px)}50%{opacity:1;transform:translateY(2px)}}
.yk .gwarrow{animation:arrowY 2s var(--ease) infinite}
@keyframes cardLiftP{0%,100%{transform:translateY(0);border-color:var(--line);background:var(--glass-grad);box-shadow:var(--card-shadow-sm)}10%{transform:translateY(-7px);border-color:var(--blue);background:var(--sky-tint);box-shadow:0 14px 28px color-mix(in srgb,var(--blue) 20%,transparent)}28%{transform:translateY(0);border-color:var(--line);background:var(--glass-grad);box-shadow:var(--card-shadow-sm)}}
.yk .govcols .govc{animation:cardLiftP 5s var(--ease) infinite}
.yk .govcols .govc:nth-child(2){animation-delay:1.3s}
@keyframes caCycle{0%,8%{opacity:0;transform:translateY(10px)}18%,90%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(4px)}}
.yk .chatm .ca{animation:caCycle 7s var(--ease) infinite both}
@keyframes srcCycle{0%,26%{opacity:0;transform:translateY(8px)}36%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
.yk .chatm .src .s{animation:srcCycle 7s var(--ease) infinite both}
.yk .chatm .src .s:nth-child(2){animation-delay:.5s}
@keyframes stepGlow{0%,100%{opacity:.5;box-shadow:var(--card-shadow-sm);transform:none}8%{opacity:1;box-shadow:0 12px 24px color-mix(in srgb,var(--blue) 18%,transparent);transform:translateY(-4px)}24%{opacity:.5;box-shadow:var(--card-shadow-sm);transform:none}}
.yk .pipe .pstep .pcard{animation:stepGlow 6s var(--ease) infinite both}
.yk .pipe .pstep:nth-child(3) .pcard{animation-delay:.6s}
.yk .pipe .pstep:nth-child(5) .pcard{animation-delay:1.2s}
.yk .pipe .pstep:nth-child(7) .pcard{animation-delay:1.8s}
@keyframes eyeBlink{0%,84%,100%{transform:scaleY(1)}89%{transform:scaleY(.08)}93%{transform:scaleY(1)}}
@keyframes eyeSpark{0%,90%{opacity:.8;transform:scale(1)}95%{opacity:1;transform:scale(1.35)}100%{opacity:.8;transform:scale(1)}}
@keyframes modalIn{0%{opacity:0;transform:translateY(16px) scale(.98)}100%{opacity:1;transform:none}}
@media (max-width:900px){
.yk .probrow,.yk .mgrid,.yk .govcols,.yk .gwin{grid-template-columns:1fr}
.yk .cmptable{font-size:12px}
.yk .archrow{flex-direction:column}
.yk .dmz{flex:auto}
.yk .minostat{flex-wrap:wrap;gap:18px}
}
@media (max-width:900px){
.yk .yk-grid{grid-template-columns:1fr;gap:32px}
.yk .col-viz{order:2}
.yk .win-body{min-height:auto}
.yk .gengrid{grid-template-columns:repeat(3,1fr)}
.yk .ucgrid{grid-template-columns:1fr}
.yk .vs{grid-template-columns:1.2fr .9fr .9fr}
}
@media (prefers-reduced-motion:reduce){.yk .result{opacity:1;transform:none}
.yk .gg{opacity:1;transform:none}
.yk .code-body .ln{opacity:1}
}

/* ---------- 사이트 기준 보정 ---------- */
/* 두 칸·가운데 정렬 섹션 모두 사이트 콘텐츠 폭(헤더 로고 ~ 도입문의 버튼)에 맞춘다 */
.yk .yk-grid { max-width: var(--max-width); }
.yk .fullwrap { max-width: none; }
/* 카드 모서리의 색 번짐(glow) 효과 제거 — 사이트는 평면 카드 */
.yk .vcard .glow { display: none; }