/* Knot case study: page-specific components, in the site's pixel design
   language (Silkscreen micro labels, hairlines, no radius, no shadows).
   The embedded prototypes keep their own Toss-style visual world: they are
   the exhibited artifact; this page is the gallery around them. */

/* ---------- bilingual switching (default: EN, no flash before JS) ---------- */
.lang-ko { display: none !important; }
body[data-lang="ko"] .lang-en { display: none !important; }
body[data-lang="ko"] .lang-ko { display: revert !important; }

/* floating KO/EN toggle */
.lang-fab {
  position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); z-index: 50;
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--line-box); background: #fff;
}
.lang-fab .lf-label {
  font-family: var(--pix); font-size: 9px; letter-spacing: 0.14em;
  color: var(--muted-2); padding: 0 10px; border-right: 1px solid var(--line-sub);
}
.lang-fab button {
  border: none; background: #fff; padding: 10px 14px;
  font-family: var(--pix); font-size: 10px; letter-spacing: 0.14em; color: var(--muted);
}
.lang-fab button.active { background: #111; color: #fff; }

/* ---------- hero: live mini-demo ---------- */
.knot-demo-wrap { border: 1px solid var(--line-box); background: var(--box-fill); padding: clamp(24px, 3.5vw, 48px); display: flex; justify-content: center; }
.knot-demo { width: 100%; max-width: 560px; background: #fff; border: 1px solid var(--line-box); padding: 24px; }
.kd-label {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font-family: var(--pix); font-size: 9px; letter-spacing: 0.14em; color: var(--muted-2); text-transform: uppercase;
}
.kd-label .live { width: 7px; height: 7px; background: var(--ok); animation: kd-pulse 2s ease infinite; }
@keyframes kd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.kd-q {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line-box); margin-bottom: 14px;
  transition: border-color 0.5s ease, background 0.5s ease;
}
.kd-q.answered { border-color: var(--ok); background: #f4faf6; }
.kd-q .who {
  font-family: var(--pix); font-size: 9px; letter-spacing: 0.1em;
  color: #fff; background: #111; padding: 4px 7px; flex-shrink: 0;
}
.kd-q .qtext { flex: 1; font-size: 13.5px; font-weight: 600; }
.kd-q .ans {
  font-family: var(--pix); font-size: 9px; letter-spacing: 0.1em; color: var(--ok);
  text-transform: uppercase; opacity: 0; transition: opacity 0.4s ease; white-space: nowrap;
}
.kd-q.answered .ans { opacity: 1; }
.kd-times { display: flex; flex-direction: column; gap: 8px; }
.kd-time {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border: 1px solid var(--line-sub); font-size: 13px; font-weight: 500;
  transition: border-color 0.5s ease, background 0.5s ease;
}
.kd-time .tl { flex: 1; }
.kd-time .st {
  font-family: var(--pix); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint-2); white-space: nowrap; transition: color 0.5s ease;
}
.kd-time.waiting .st { color: var(--cat-orange); }
.kd-time.best { border-color: var(--accent); background: #f5f8fd; }
.kd-time.best .st { color: var(--accent); }
.kd-cap {
  margin-top: 16px; text-align: center; min-height: 16px;
  font-family: var(--pix); font-size: 9px; letter-spacing: 0.1em;
  color: var(--muted-2); text-transform: uppercase; transition: opacity 0.35s ease;
}
.kd-tease {
  margin: 20px auto 0; text-align: center; max-width: 62ch;
  font-size: 15px; line-height: 1.7; color: var(--body-2); text-wrap: pretty;
}

/* about-the-challenge context box (below the Toss brief hero) */
.challenge-note {
  border: 1px solid var(--line-box); background: var(--box-fill);
  padding: clamp(22px, 3vw, 34px); margin: 32px 0 8px;
}
.challenge-note .cn-label {
  font-family: var(--pix); font-size: 9px; letter-spacing: 0.16em;
  color: var(--accent); text-transform: uppercase; margin-bottom: 12px;
}
.challenge-note p {
  margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--body); text-wrap: pretty;
}
.challenge-note strong { color: var(--ink); font-weight: 600; }

/* ---------- 01: the broken flow ---------- */
.k-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.k-chips span {
  font-family: var(--pix); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--body-2); border: 1px solid var(--line-box); background: #fff; padding: 7px 11px;
}
.bflow { max-width: 640px; }
.bf-step {
  display: flex; gap: 14px; align-items: center; padding: 12px 14px;
  border: 1px solid var(--line-box); background: #fff; margin-bottom: 8px;
}
.bf-step .n { font-family: var(--pix); font-size: 10px; color: var(--faint-2); flex-shrink: 0; width: 20px; }
.bf-step p { margin: 0; font-size: 14px; color: var(--ink); flex: 1; line-height: 1.6; }
.bf-tag {
  font-family: var(--pix); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 8px; white-space: nowrap; flex-shrink: 0;
}
.bf-tag.tool { color: var(--accent); border: 1px solid #ccd8ee; }
.bf-tag.human { color: var(--cat-orange); border: 1px solid #ecd3bc; }
.rupture {
  display: flex; align-items: center; gap: 12px; margin: 18px 0;
  font-family: var(--pix); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cat-orange); white-space: nowrap;
}
.rupture::before, .rupture::after { content: ""; flex: 1; border-top: 1px dashed #ecd3bc; }
.fix-zone { position: relative; border: 1px dashed var(--accent); padding: 22px 14px 6px; margin-top: 6px; }
.fix-zone .fz-chip {
  position: absolute; top: -9px; right: 14px; background: var(--accent); color: #fff;
  font-family: var(--pix); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px;
}
.bflow-note { margin: 24px 0 0; font-size: 15px; line-height: 1.7; color: var(--ink); font-weight: 500; }
.bflow-note strong { color: var(--accent); }

/* ---------- 02: how it works ---------- */
.how3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 40px); margin-top: 26px; }
.how3 .h-item { border-top: 2px solid var(--accent); padding-top: 20px; }
.how3 .h-n { font-family: var(--pix); font-size: 9px; letter-spacing: 0.12em; color: var(--accent); text-transform: uppercase; margin-bottom: 12px; }
.how3 h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.how3 p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--body); text-wrap: pretty; }
.k-punch { margin: 30px 0 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.k-punch .accent { color: var(--accent); }

/* ---------- 03: prototypes ---------- */
.proto-block { margin-top: 36px; }
.proto-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.proto-head .pn { font-family: var(--pix); font-size: 10px; letter-spacing: 0.14em; color: var(--accent); text-transform: uppercase; }
.proto-head h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.proto-note { margin: 0 0 20px; font-size: 14px; line-height: 1.7; color: var(--body-2); max-width: 64ch; text-wrap: pretty; }
.proto-controls { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.proto-controls.center { justify-content: center; }
.proto-controls.below { margin-top: 18px; margin-bottom: 0; }
.scenario-toggle { display: flex; border: 1px solid var(--line-box); background: #fff; }
.scenario-toggle button {
  border: none; background: #fff; padding: 10px 14px;
  font-family: var(--pix); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.scenario-toggle button.active { background: #111; color: #fff; }
.proto-btn {
  border: 1px solid var(--line-box); background: #fff; padding: 10px 14px;
  font-family: var(--pix); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  display: inline-block;
}
.proto-btn:hover { color: var(--ink); opacity: 1; }
/* realistic device frames: a deliberate exception to the flat system:
   the prototypes are artifacts, presented in the devices they'd really
   run in. macOS browser chrome + white clay phone. */
.browser-frame {
  max-width: 880px; border-radius: 12px; overflow: hidden; background: #fff;
  border: 1px solid rgba(23, 24, 28, 0.10);
  box-shadow: 0 1px 3px rgba(23, 24, 28, 0.08), 0 28px 70px rgba(23, 24, 28, 0.17);
}
.browser-bar {
  display: flex; align-items: center; padding: 11px 16px;
  background: linear-gradient(180deg, #f8f8f9, #ededf0);
  border-bottom: 1px solid #dcdce1;
}
.browser-bar .dots { display: flex; gap: 8px; width: 72px; flex-shrink: 0; }
.browser-bar .dots span {
  width: 12px; height: 12px; border-radius: 50%; display: block;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
}
.browser-bar .dots .r { background: #ff5f57; }
.browser-bar .dots .y { background: #febc2e; }
.browser-bar .dots .g { background: #28c840; }
.browser-bar .url {
  flex: 1; max-width: 340px; margin: 0 auto; text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12.5px; color: #5c5c61; background: #fff;
  border: 1px solid rgba(23, 24, 28, 0.07); border-radius: 7px; padding: 5px 14px;
  white-space: nowrap; overflow: hidden;
}
.browser-bar .url .lock { font-size: 10px; opacity: 0.65; }
.browser-bar .bar-end { width: 72px; flex-shrink: 0; }
.browser-frame iframe { width: 100%; height: 680px; border: none; display: block; }

.phone-wrap { display: flex; justify-content: center; padding: 10px 0 6px; }
.phone-frame {
  width: 404px; max-width: 100%; padding: 17px; border-radius: 58px;
  background: linear-gradient(150deg, #ffffff 0%, #f2f3f6 55%, #e4e6eb 100%);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
    inset 0 -1.5px 2px rgba(23, 24, 28, 0.10),
    0 2px 6px rgba(23, 24, 28, 0.08),
    0 36px 80px rgba(23, 24, 28, 0.20);
}
.phone-screen {
  border-radius: 42px; overflow: hidden; background: #fff;
  border: 1px solid rgba(23, 24, 28, 0.07);
}
.phone-screen iframe { width: 100%; height: 760px; border: none; display: block; }
.try-hint {
  display: inline-block; margin-top: 14px;
  font-family: var(--pix); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); border: 1px solid #ccd8ee; padding: 8px 12px; line-height: 1.8;
}
.step-strip { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.try-hint-wrap { text-align: center; }
.step-strip .st {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--pix); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--body-2); border: 1px solid var(--line-box); background: #fff; padding: 6px 10px;
}
.step-strip .st .n { color: var(--accent); }
.step-strip .arrow { font-family: var(--pix); font-size: 10px; color: var(--faint-2); }

/* ---------- persona / rejected / AI cards ---------- */
.k-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.k-cards.two { grid-template-columns: 1fr 1fr; }
.k-card { border: 1px solid var(--line-box); background: #fff; padding: 22px; }
.k-card .tag {
  display: inline-block; font-family: var(--pix); font-size: 8px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 4px 8px; margin-bottom: 14px; border: 1px solid;
}
.k-card .tag.blue { color: var(--cat-blue); border-color: #ccd8ee; }
.k-card .tag.green { color: var(--cat-green); border-color: #c4e3d1; }
.k-card .tag.orange { color: var(--cat-orange); border-color: #ecd3bc; }
.k-card .tag.rejected { color: var(--err); border-color: #eaccc8; }
.k-card h3 { margin: 0 0 8px; font-size: 15.5px; font-weight: 600; line-height: 1.45; letter-spacing: -0.01em; }
.k-card p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--body); text-wrap: pretty; }

/* ---------- reframe flow ---------- */
.reframe .r-step { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line-sub); }
.reframe .r-step:last-child { border-bottom: none; }
.reframe .r-num { font-family: var(--pix); font-size: 10px; color: var(--accent); width: 28px; flex-shrink: 0; padding-top: 3px; }
.reframe h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.reframe p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--body); max-width: 62ch; text-wrap: pretty; }
.strike { text-decoration: line-through; color: var(--faint); font-weight: 500; }

/* ---------- 07: the primitive ---------- */
.primitive { background: #111; color: #fff; padding: clamp(28px, 4vw, 48px); margin: 8px 0 28px; }
.primitive .p-label { font-family: var(--pix); font-size: 9px; letter-spacing: 0.14em; color: #9db8e8; text-transform: uppercase; margin-bottom: 12px; }
.primitive h3 { margin: 0 0 16px; font-size: clamp(20px, 2.2vw, 27px); font-weight: 700; letter-spacing: -0.02em; }
.primitive .p-desc { margin: 0; font-size: 14.5px; line-height: 1.8; color: #c9d4e8; max-width: 62ch; text-wrap: pretty; }
.p-anatomy { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); margin-top: 28px; }
.p-anatomy .a-item { border-top: 1px solid #3a3a3a; padding-top: 14px; }
.p-anatomy .a-term { font-family: var(--pix); font-size: 10px; letter-spacing: 0.12em; color: #fff; text-transform: uppercase; margin-bottom: 6px; }
.p-anatomy .a-desc { font-size: 12.5px; color: #9aa7bd; line-height: 1.65; }
.p-lineage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #3a3a3a; border: 1px solid #3a3a3a; margin-top: 28px; }
.p-lineage .l-item { background: #111; padding: 14px 16px; }
.p-lineage .l-k { font-family: var(--pix); font-size: 8px; letter-spacing: 0.12em; color: #9db8e8; text-transform: uppercase; margin-bottom: 6px; }
.p-lineage .l-v { font-size: 13px; font-weight: 600; color: #fff; }
.principle-note {
  margin: 0; padding-left: 22px; border-left: 2px solid var(--cat-blue);
  font-size: 15px; line-height: 1.75; color: var(--ink); text-wrap: pretty;
}
.principle-note strong { font-weight: 600; }

/* ---------- decision notice lists (organizer board / attendee flow) ---------- */
.notice-list { border-bottom: 1px solid var(--line-sub); margin-top: 8px; }
.notice { border-top: 1px solid var(--line-sub); padding: 18px 0; }
.notice .n-k {
  font-family: var(--pix); font-size: 9px; letter-spacing: 0.12em;
  color: var(--accent); text-transform: uppercase; margin-bottom: 8px; line-height: 1.8;
}
.notice p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--body); max-width: 66ch; text-wrap: pretty; }

/* kill-question line in rejected cards */
.kill-q {
  margin: 0 0 10px; font-family: var(--pix); font-size: 8px; letter-spacing: 0.1em;
  color: var(--err); text-transform: uppercase; line-height: 1.9;
}

/* ---------- 08: open questions ---------- */
.q-list { display: flex; flex-direction: column; gap: 12px; }
.q-item { display: flex; gap: 16px; border: 1px solid var(--line-box); background: #fff; padding: 20px 22px; }
.q-item .qmark {
  font-family: var(--pix); font-size: 12px; color: var(--cat-orange);
  border: 1px solid #ecd3bc; width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.q-item h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.q-item p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--body); text-wrap: pretty; }

/* ---------- 10: recap ---------- */
.recap { display: flex; flex-direction: column; gap: 26px; }
.recap .rq { font-family: var(--pix); font-size: 9px; letter-spacing: 0.12em; color: var(--accent); text-transform: uppercase; margin-bottom: 8px; line-height: 1.8; }
.recap .ra { margin: 0; font-size: 15px; line-height: 1.8; color: var(--ink); text-wrap: pretty; }

@media (max-width: 900px) {
  .how3, .k-cards, .k-cards.two, .p-anatomy { grid-template-columns: 1fr; }
  .p-lineage { grid-template-columns: 1fr 1fr; }
  .browser-frame iframe { height: 640px; }
}