/* 작동 원리 레이어 — how.js. play.css · lab.css · 인지 과제 어디에 붙어도 같게 보이도록 색을 따로 갖는다 */
.how-open{margin:18px 0 0}
.how-btn{font:inherit;font-size:14px;font-weight:700;line-height:1.3;cursor:pointer;color:var(--fg,inherit);
  background:var(--glass,transparent);border:1px solid var(--line,rgba(128,128,128,.35));border-radius:99px;padding:9px 18px;
  transition:border-color .15s,transform .15s}
.how-btn:hover{border-color:var(--acc,#888);transform:translateY(-1px)}
html.how-lock{overflow:hidden}

.how{--h-bg:#14121f;--h-card:#1c1a2c;--h-fg:#f4f2ff;--h-dim:#a7a3c0;--h-line:rgba(255,255,255,.13);--h-acc:#c7b6ff;
  --h-me:#d9d6ea;--h-ph:#7ee8d8;--h-sv:#c7b6ff;--h-ai:#ff9ecb;--h-st:#ffd27e;--h-no:#ff9a9a;color-scheme:dark;
  width:min(760px,calc(100vw - 32px));max-width:none;max-height:min(90vh,980px);max-height:min(90dvh,980px);margin:auto;padding:0;
  border:1px solid var(--h-line);border-radius:24px;background:var(--h-bg);color:var(--h-fg);overflow:auto;overscroll-behavior:contain;
  font:15px/1.65 "Noto Sans KR",-apple-system,"Apple SD Gothic Neo",system-ui,sans-serif;text-align:left;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.7)}
@media (prefers-color-scheme:light){
  .how{--h-bg:#fff;--h-card:#f6f4fd;--h-fg:#17142b;--h-dim:#5f5b78;--h-line:rgba(20,10,60,.13);--h-acc:#6c4cf0;
    --h-me:#4a4663;--h-ph:#0d8a79;--h-sv:#6c4cf0;--h-ai:#d0306f;--h-st:#a66a12;--h-no:#c43232;color-scheme:light}
}
.how::backdrop{background:rgba(6,5,12,.62);backdrop-filter:blur(4px)}
.how[open]{animation:how-in .22s cubic-bezier(.2,.8,.2,1)}
@keyframes how-in{from{opacity:0;transform:translateY(18px)}}
.how *{box-sizing:border-box}
.how b{font-weight:700}
.how-in{padding:26px 26px 30px}

.how-h{position:relative;padding-right:44px}
.how-h .how-k{margin:0 0 4px;font-size:12px;font-weight:800;letter-spacing:.22em;color:var(--h-acc)}
.how-h h2:focus{outline:none}
.how-h h2{margin:0;font:800 clamp(22px,4.4vw,30px)/1.25 "Fraunces","Noto Sans KR",-apple-system,"Apple SD Gothic Neo",system-ui,sans-serif;letter-spacing:-.02em;border:0;padding:0}
.how-h .how-x{position:absolute;top:-4px;right:-6px;width:40px;height:40px;border-radius:50%;border:1px solid var(--h-line);
  background:var(--h-card);color:var(--h-fg);font:inherit;font-size:16px;cursor:pointer}
.how .how-sum{margin:12px 0 0;font-size:15.5px}
.how .how-chips,.how .how-jump,.how .how-lg{display:flex;flex-wrap:wrap;gap:6px}
.how .how-chips{margin:14px 0 0}
.how .how-chips span{padding:4px 11px;border-radius:99px;font-size:12.5px;font-weight:700;background:var(--h-card);border:1px solid var(--h-line)}
.how .how-jump{margin:16px 0 0;padding:12px 0 0;border-top:1px solid var(--h-line)}
.how .how-jump button{font:inherit;font-size:13px;font-weight:700;color:var(--h-acc);background:none;border:1px solid var(--h-line);
  border-radius:99px;padding:5px 12px;cursor:pointer}
.how h3{margin:30px 0 12px;font-size:16px;font-weight:800;scroll-margin-top:12px;border:0;padding:0}
.how h3 small{margin-left:6px;font-size:12.5px;font-weight:500;color:var(--h-dim)}
.how .how-lg{margin:-4px 0 12px;font-size:12px;color:var(--h-dim)}
.how .how-lg span::before{content:"";display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px;vertical-align:-1px;background:var(--c)}
.how .how-lg .phone{--c:var(--h-ph)}.how .how-lg .server{--c:var(--h-sv)}
.how .how-lg .ask::before{background:none;border:1.5px dashed var(--h-st)}

/* 순서도 — 위에서 아래로, 왼쪽 띠 색 = 어디서 도나 */
.how-fl{display:flex;flex-direction:column}
.how-fl .nd{position:relative;padding:12px 16px 12px;border-radius:14px;background:var(--h-card);
  border:1px solid var(--h-line);border-left:4px solid var(--c,var(--h-line))}
.how-fl .nd.phone{--c:var(--h-ph)}.how-fl .nd.server{--c:var(--h-sv)}
.how-fl .nd.io{border-radius:22px}
.how-fl .nd.ask{border-style:dashed;border-left-style:solid;background:color-mix(in srgb,var(--h-st) 9%,var(--h-card))}
.how-fl .nd b{display:block;font-size:15px;padding-right:74px}
.how-fl .nd p{margin:3px 0 0;font-size:13.5px;color:var(--h-dim)}
.how-fl .at{position:absolute;top:11px;right:13px;font-size:11.5px;font-weight:700;color:var(--c)}
.how-fl .no{display:inline-block;margin-top:8px;padding:3px 11px;border-radius:99px;font-size:12.5px;font-weight:600;color:var(--h-no);
  border:1px solid color-mix(in srgb,var(--h-no) 50%,transparent)}
.how-fl .ar{display:block;padding:3px 0;text-align:center;font-style:normal;font-size:12.5px;font-weight:700;color:var(--h-dim);line-height:1.4}

/* 시퀀스 다이어그램 — 세로 점선이 등장인물, 가로 화살표가 주고받는 것, 폭 전체 칸은 그 안에서 하는 일 */
.how-sq{padding:12px 6px 10px;border-radius:16px;background:var(--h-card);border:1px solid var(--h-line)}
.how-sq .sq-h,.how-sq .sq-b{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.how-sq .sq-h span{margin:0 3px;padding:6px 2px;border-radius:10px;text-align:center;font-size:12px;font-weight:800;line-height:1.3;
  color:var(--c);border:1.5px solid color-mix(in srgb,var(--c) 60%,transparent);background:var(--h-bg)}
.how-sq .sq-b{position:relative;row-gap:2px;padding:10px 0 4px}
.how-sq .life{position:absolute;top:0;bottom:0;left:calc((var(--i) + .5) * 100% / var(--n));border-left:2px dashed var(--h-line)}
.how-sq .ms{position:relative;padding:3px 2px 17px;text-align:center;font-size:12.5px;line-height:1.35}
.how-sq .ms span{position:relative;z-index:1;display:inline-block;padding:0 5px;border-radius:6px;background:var(--h-card)}
.how-sq .ms::before{content:"";position:absolute;bottom:8px;height:2px;left:calc(50% / var(--k));right:calc(50% / var(--k));background:var(--c)}
.how-sq .ms::after{content:"";position:absolute;bottom:3px;border-top:6px solid transparent;border-bottom:6px solid transparent}
.how-sq .ms.to-r::after{right:calc(50% / var(--k) - 3px);border-left:10px solid var(--c)}
.how-sq .ms.to-l::after{left:calc(50% / var(--k) - 3px);border-right:10px solid var(--c)}
.how-sq .nt{grid-column:1/-1;position:relative;z-index:1;margin:3px 4px 9px;padding:7px 12px;border-radius:12px;font-size:12.5px;line-height:1.45;
  background:color-mix(in srgb,var(--c) 13%,var(--h-card));border:1px solid color-mix(in srgb,var(--c) 45%,transparent)}
.how-sq .nt em{font-style:normal;font-weight:800;color:var(--c);margin-right:7px}

/* 학습 데이터 */
.how-dt{margin:0 0 10px;padding:14px 16px;border-radius:16px;background:var(--h-card);border:1px solid var(--h-line)}
.how-dt .dt-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.how-dt .dt-h b{font-size:15px}
.how-dt .dt-tag{flex:none;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--h-acc);border:1px solid currentColor}
.how-dt .dt-tag.ref{color:var(--h-st)}.how-dt .dt-tag.pub{color:var(--h-ph)}.how-dt .dt-tag.none{color:var(--h-dim)}
.how-dt .dt-src{margin:3px 0 0;font-size:13px;color:var(--h-dim)}
.how-dt .dt-n{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.how-dt .dt-n span{padding:3px 10px;border-radius:99px;font-size:13px;font-weight:700;background:color-mix(in srgb,var(--h-acc) 15%,transparent)}
.how-dt p:not(.dt-src){margin:9px 0 0;font-size:13.5px}
.how-dt .dt-l{display:grid;grid-template-columns:auto 1fr;gap:7px 12px;margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--h-line);font-size:13.5px}
.how-dt .dt-l dt{font-weight:800;color:var(--h-acc);white-space:nowrap}
.how-dt .dt-l dd{margin:0}

/* AI Hub 로 배운 AI 의 공통 순서 — ③ 맨 위 */
.how .how-rc{margin:0 0 12px;padding:14px 16px 14px;border-radius:16px;border:1px dashed color-mix(in srgb,var(--h-acc) 50%,transparent)}
.how .how-rc .rc-h{margin:0;font-size:14px;font-weight:800}
.how .how-rc ol{margin:8px 0 0;padding-left:22px;font-size:13.5px;color:var(--h-dim)}
.how .how-rc li{margin:7px 0 0}
.how .how-rc li b{display:block;font-size:14px;color:var(--h-fg)}

.how .how-keep{margin:0;padding:12px 16px;border-radius:14px;font-size:14px;background:color-mix(in srgb,var(--h-ph) 10%,var(--h-card));
  border:1px solid color-mix(in srgb,var(--h-ph) 35%,transparent)}
.how .how-terms{margin:22px 0 0;padding:12px 16px;border-radius:14px;border:1px solid var(--h-line)}
.how .how-terms summary{cursor:pointer;font-weight:700;font-size:14px}
.how .how-terms dl{margin:10px 0 0;display:grid;gap:8px}
.how .how-terms dt{font-weight:700;font-size:13.5px}
.how .how-terms dd{margin:0 0 4px;font-size:13.5px;color:var(--h-dim)}
.how .how-nia{margin:18px 0 0;font-size:12px;color:var(--h-dim);text-align:center}

@media (max-width:560px){
  .how{width:100%;max-height:92vh;max-height:92dvh;margin:auto 0 0;border-radius:22px 22px 0 0;border-bottom:0}
  .how-in{padding:20px 16px 26px}
  .how-sq{padding:10px 2px 8px}
  .how-sq .sq-h span{font-size:11px;margin:0 2px}
  .how-sq .ms,.how-sq .nt{font-size:12px}
}