#workshop-content
{
  --bg: #12181F;
  --bg-card: #1B242E;
  --bg-code: #0C1117;
  --bg-inline: #232E3A;
  --line: #2A3542;
  --orange: #FF9900;
  --orange-dim: rgba(255, 153, 0, 0.14);
  --crimson: #B6002E;
  --green: #3FB950;
  --green-dim: rgba(63, 185, 80, 0.12);
  --text: #E2E4EC;
  --muted: #A6ABBE;
  --dim: #7B8198;
  --font-body: "NanumSquareOTF", "나눔스퀘어OTF", "NanumSquare", "나눔스퀘어", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-code: "D2Coding", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#workshop-content *
{ margin: 0; padding: 0; box-sizing: border-box; }
#workshop-content
{ scroll-behavior: smooth; scroll-padding-top: 76px; }
@media  (prefers-reduced-motion: reduce) {#workshop-content
{ scroll-behavior: auto; }
#workshop-content *, #workshop-content *::before, #workshop-content *::after
{ animation: none !important; transition: none !important; }}
#workshop-content
{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
#workshop-content ::selection
{ background: rgba(255, 153, 0, 0.3); }
#workshop-content a
{ color: var(--orange); text-decoration: none; }
#workshop-content a:hover
{ text-decoration: underline; }
#workshop-content button:focus-visible, #workshop-content a:focus-visible, #workshop-content input:focus-visible
{
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
#workshop-content .hero
{
  position: relative;
  padding: 64px 32px 44px;
  max-width: 1160px;
  margin: 0 auto;
  overflow: hidden;
}
#workshop-content .hero::after
{
  content: "";
  position: absolute;
  top: -140px; right: -180px;
  width: 460px; height: 460px;
  background: radial-gradient(closest-side, rgba(182, 0, 46, 0.28), rgba(255, 153, 0, 0.10) 55%, transparent 75%);
  pointer-events: none;
}
#workshop-content .eyebrow
{
  display: inline-block;
  background: var(--crimson);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 5px 12px;
  border-radius: 3px;
  text-transform: uppercase;
  margin-bottom: 22px;
}
#workshop-content .hero h1
{
  font-size: clamp(28px, 4.4vw, 42px);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.01em;
  max-width: 780px;
}
#workshop-content .hero .subtitle
{
  margin-top: 14px;
  color: var(--orange);
  font-size: clamp(16px, 2.2vw, 19px);
  font-weight: 700;
}
#workshop-content .hero .lede
{
  margin-top: 18px;
  color: var(--muted);
  max-width: 720px;
  font-size: 15.5px;
}
#workshop-content .hero-meta
{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 26px;
  color: var(--dim);
  font-size: 13px;
}
#workshop-content .hero-meta strong
{ color: var(--text); font-weight: 700; }
#workshop-content .timeline
{
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(12, 17, 23, 0.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
#workshop-content .timeline-inner
{
  max-width: 1160px;
  margin: 0 auto;
  padding: 10px 32px;
  display: flex;
  align-items: center;
  gap: 18px;
}
#workshop-content .timeline-label
{
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--dim);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
#workshop-content .timeline-label strong
{ color: var(--orange); font-size: 13px; }
#workshop-content .segments
{
  flex: 1;
  display: flex;
  gap: 4px;
  height: 26px;
}
#workshop-content .seg
{
  position: relative;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-card);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s;
  padding: 0;
  font-family: var(--font-body);
}
#workshop-content .seg:hover
{ border-color: var(--orange); }
#workshop-content .seg .fill
{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 153, 0, 0.85), rgba(255, 153, 0, 0.65));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
#workshop-content .seg.done .fill
{ transform: scaleX(1); }
#workshop-content .seg .seg-txt
{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--dim);
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
}
#workshop-content .seg.done .seg-txt
{ color: #12181F; }
#workshop-content .seg.active
{ border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange) inset; }
#workshop-content .layout
{
  max-width: 1160px;
  margin: 0 auto;
  padding: 44px 32px 80px;
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}
#workshop-content .sidenav
{
  position: sticky;
  top: 66px;
  font-size: 13.5px;
}
#workshop-content .sidenav .nav-title
{
  font-size: 11px;
  font-weight: 700;
  color: var(--dim);
  letter-spacing: 0.14em;
  margin-bottom: 14px;
}
#workshop-content .sidenav a
{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  padding: 7px 10px;
  border-radius: 6px;
  border-left: 2px solid transparent;
}
#workshop-content .sidenav a:hover
{ color: var(--text); background: var(--bg-card); text-decoration: none; }
#workshop-content .sidenav a.active
{ color: var(--orange); border-left-color: var(--orange); background: var(--bg-card); }
#workshop-content .sidenav .dot
{
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--dim);
}
#workshop-content .sidenav a.done .dot
{ background: var(--green); border-color: var(--green); }
#workshop-content .sidenav .nav-time
{ margin-left: auto; font-size: 11px; color: var(--dim); }
#workshop-content .task
{ margin-bottom: 72px; }
#workshop-content .task-head
{
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}
#workshop-content .task-num
{
  font-family: var(--font-code);
  font-size: 13px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 0.1em;
}
#workshop-content .task-head h2
{
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
#workshop-content .time-badge
{
  margin-left: auto;
  flex: none;
  background: var(--orange-dim);
  color: var(--orange);
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
}
#workshop-content .task-goal
{
  color: var(--muted);
  margin-bottom: 24px;
  max-width: 760px;
}
#workshop-content .task-goal strong
{ color: var(--text); }
#workshop-content .step-title
{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16.5px;
  font-weight: 800;
  margin: 34px 0 12px;
}
#workshop-content .step-title .step-no
{
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--orange);
  color: #12181F;
  font-size: 12.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
#workshop-content p.body
{ color: var(--muted); margin: 10px 0 14px; max-width: 760px; }
#workshop-content p.body strong, #workshop-content li strong
{ color: var(--text); }
#workshop-content code.inline
{
  font-family: var(--font-code);
  font-size: 0.88em;
  background: var(--bg-inline);
  color: #FFC466;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
#workshop-content kbd
{
  font-family: var(--font-code);
  font-size: 0.82em;
  background: var(--bg-inline);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 2px 8px;
  color: var(--text);
}
#workshop-content .code-wrap
{
  background: var(--bg-code);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 14px 0 20px;
  overflow: hidden;
}
#workshop-content .code-head
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}
#workshop-content .code-label
{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--dim);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 7px;
}
#workshop-content .copy-btn
{
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg-inline);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
#workshop-content .copy-btn:hover
{ color: var(--orange); border-color: var(--orange); }
#workshop-content .copy-btn.copied
{ color: var(--green); border-color: var(--green); }
#workshop-content .code-wrap pre
{
  padding: 16px 18px;
  overflow-x: auto;
  font-family: var(--font-code);
  font-size: 13.5px;
  line-height: 1.7;
}
#workshop-content .code-wrap code
{ font-family: inherit; color: #D8DEE9; }
#workshop-content .code-wrap.output pre
{ color: var(--dim); }
#workshop-content .code-wrap .cmt
{ color: #5E6B7E; }
#workshop-content .code-wrap .hl
{ color: #FFC466; }
#workshop-content .code-wrap .ok
{ color: var(--green); }
#workshop-content .callout
{
  border-radius: 8px;
  background: var(--bg-card);
  padding: 14px 18px;
  margin: 18px 0;
  font-size: 14.5px;
  color: var(--muted);
  max-width: 760px;
}
#workshop-content .callout strong
{ color: var(--text); }
#workshop-content .callout.tip .co-title
{ color: var(--orange); }
#workshop-content .callout .co-title
{
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin-bottom: 5px;
}
#workshop-content .callout.warn .co-title
{ color: #FF5C85; }
#workshop-content .checkpoint
{
  background: var(--green-dim);
  border: 1px solid rgba(63, 185, 80, 0.35);
  border-radius: 10px;
  padding: 16px 20px;
  margin-top: 28px;
}
#workshop-content .checkpoint .cp-title
{
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--green);
  margin-bottom: 10px;
}
#workshop-content .cp-item
{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
  cursor: pointer;
  color: var(--muted);
  font-size: 14.5px;
}
#workshop-content .cp-item input
{
  flex: none;
  margin-top: 5px;
  width: 15px; height: 15px;
  accent-color: var(--green);
  cursor: pointer;
}
#workshop-content .cp-item input:checked + span
{ color: var(--text); }
#workshop-content .tabs
{ margin: 18px 0 6px; }
#workshop-content .tab-btns
{
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
#workshop-content .tab-btn
{
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--dim);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 9px 16px;
  cursor: pointer;
  margin-bottom: -1px;
}
#workshop-content .tab-btn:hover
{ color: var(--text); }
#workshop-content .tab-btn.active
{ color: var(--orange); border-bottom-color: var(--orange); }
#workshop-content .tab-pane
{ display: none; padding-top: 16px; }
#workshop-content .tab-pane.active
{ display: block; }
#workshop-content .tbl
{
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 22px;
  font-size: 14px;
  background: var(--bg-card);
  border-radius: 10px;
  overflow: hidden;
}
#workshop-content .tbl th, #workshop-content .tbl td
{
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid #FFFFFF14;
}
#workshop-content .tbl th
{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--orange);
  background: rgba(255, 255, 255, 0.03);
}
#workshop-content .tbl td
{ color: var(--muted); vertical-align: middle; }
#workshop-content .tbl td:first-child
{ color: var(--text); font-weight: 700; white-space: nowrap; }
#workshop-content .tbl tr:last-child td
{ border-bottom: none; }
#workshop-content .tbl code
{ font-family: var(--font-code); font-size: 0.9em; color: #FFC466; }
#workshop-content .wrapup
{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px 34px;
  margin-bottom: 56px;
}
#workshop-content .wrapup h2
{ font-size: 22px; font-weight: 800; margin-bottom: 8px; }
#workshop-content .wrapup .sub
{ color: var(--muted); font-size: 14.5px; margin-bottom: 18px; }
#workshop-content .next-box
{
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(182, 0, 46, 0.16), rgba(255, 153, 0, 0.08));
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 26px;
}
#workshop-content .next-box .nx-label
{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--orange);
}
#workshop-content .next-box h3
{ font-size: 19px; font-weight: 800; }
#workshop-content .next-box p
{ color: var(--muted); font-size: 14px; }
#workshop-content footer
{
  border-top: 1px solid var(--line);
  padding: 30px 32px 46px;
  text-align: center;
  color: var(--dim);
  font-size: 13px;
  line-height: 1.9;
}
#workshop-content footer .who
{ color: var(--muted); font-weight: 700; }
#workshop-content footer .mail
{ color: var(--orange); }
@media  (max-width: 900px) {#workshop-content .layout
{ grid-template-columns: 1fr; gap: 0; padding: 32px 20px 64px; }
#workshop-content .sidenav
{ display: none; }
#workshop-content .hero
{ padding: 44px 20px 32px; }
#workshop-content .timeline-inner
{ padding: 10px 20px; }
#workshop-content .seg .seg-txt
{ font-size: 9px; }
#workshop-content .task-head h2
{ font-size: 20px; }}
#workshop-content
{ word-break: keep-all; overflow-wrap: break-word; }
#workshop-content .hero h1
{ max-width: 980px; font-size: clamp(26px, 4vw, 38px); text-wrap: balance; }
#workshop-content .hero .subtitle, #workshop-content .hero .lede, #workshop-content .task-goal, #workshop-content .wrapup .sub
{ text-wrap: pretty; }
#workshop-content .hero
{ padding: 44px 28px 34px; }
#workshop-content .eyebrow
{ margin-bottom: 14px; }
#workshop-content .hero h1
{ line-height: 1.3; }
#workshop-content .hero .subtitle
{ margin-top: 10px; }
#workshop-content .hero .lede
{ margin-top: 12px; }
#workshop-content .seg-txt
{ text-overflow: ellipsis; }
@media  (max-width: 620px) {#workshop-content .hero
{ padding: 26px 16px 24px; }
#workshop-content .hero h1
{ font-size: 23px; }
#workshop-content .hero .subtitle
{ font-size: 15px; }
#workshop-content .hero .lede
{ font-size: 14px; }
#workshop-content .hero-meta
{ gap: 6px 14px; font-size: 12px; }
#workshop-content .seg .seg-txt
{ display: none; }
#workshop-content .timeline-inner
{ padding: 0 10px; }}
#workshop-content .tbl
{ display: block; overflow-x: auto; max-width: 100%; }
#workshop-content .hero, #workshop-content .layout, #workshop-content .timeline-inner, #workshop-content main, #workshop-content section
{ min-width: 0; }
@media  (max-width: 620px) {#workshop-content .timeline-label:last-child
{ display: none; }}
#workshop-content code.inline
{ white-space: normal; overflow-wrap: anywhere; }
#workshop-content .hero .lede, #workshop-content .task-goal, #workshop-content p.body, #workshop-content .callout, #workshop-content .part-divider p, #workshop-content .wrapup .sub
{ max-width: none; }
#workshop-content .hero .lede
{ text-wrap: wrap; }
#workshop-content .code-head
{ position: relative; padding-left: 76px; }
#workshop-content .code-head::before
{
  content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 11px; height: 11px; border-radius: 50%; background: #FF5F57;
  box-shadow: 18px 0 0 #FEBC2E, 36px 0 0 #28C840;
}
html[data-theme="light"] #workshop-content
{
  --bg:#F3F4F7; --bg-card:#FFFFFF; --bg-code:#EEF1F5; --bg-inline:#E4E9EF; --line:#D7DDE5;
  --orange:#B45309; --orange-dim:rgba(180,83,9,.12);
  --green:#1F883D; --green-dim:rgba(31,136,61,.12);
  --text:#1B2430; --muted:#5B6472; --dim:#75808F;
  background:#F3F4F7;
}
html[data-theme="light"] #workshop-content [style*="#c9a2ff"]
{color:#6b46c1 !important}
html[data-theme="light"] #workshop-content [style*="#A6ABBE"]
{color:#5B6472 !important}
#workshop-content #themeToggle
{position:fixed;right:16px;bottom:16px;z-index:9999;
background:var(--bg-card,var(--card,#1B242E));color:var(--orange,#FF9900);
border:1px solid var(--line,#2A3542);border-radius:999px;padding:9px 16px;
font:600 13px/1 sans-serif;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25)}
#workshop-content #themeToggle:hover
{border-color:var(--orange,#FF9900)}
html[data-theme="light"] #workshop-content .code-wrap code
{color:#2A3542}
html[data-theme="light"] #workshop-content .code-wrap.output code
{color:#57606E}
html[data-theme="light"] #workshop-content code
{color:#B45309;background:#E4E9EF}
html[data-theme="light"] #workshop-content .code-wrap code, html[data-theme="light"] #workshop-content pre code
{background:transparent}
html[data-theme="light"] #workshop-content .k.s
{background:#DCEEDC}
html[data-theme="light"] #workshop-content .k.w
{background:#E9E2F7}
html[data-theme="light"] #workshop-content code.inline, html[data-theme="light"] #workshop-content .inline
{color:#B45309;background:#E4E9EF;border-color:#D7DDE5}
html[data-theme="light"] #workshop-content .code-wrap .hl
{color:#B45309}
html[data-theme="light"] #workshop-content .code-wrap .cmt
{color:#6E7B8C}
html[data-theme="light"] #workshop-content .head
{--text:#E8ECF1;--muted:#8B96A5;--charcoal:#C7CDD6;--orange:#FF9900;--lavender:#c9a2ff;--line:#262F3B}
html[data-theme="light"] #workshop-content .head, html[data-theme="light"] #workshop-content .head h1
{color:#F2F4F8}
html[data-theme="light"] #workshop-content .head .when
{color:#FF9900}
html[data-theme="light"] #workshop-content .head .where, html[data-theme="light"] #workshop-content .head .facts span
{color:#C7CDD6}
html[data-theme="light"] #workshop-content .step-title .step-no, html[data-theme="light"] #workshop-content .btn.primary, html[data-theme="light"] #workshop-content .badge.ch
{color:#FFFFFF}
#workshop-content .code-wrap.prompt
{border-left:3px solid #AD8CFF; border-color:rgba(173,140,255,.38)}
#workshop-content .code-wrap.prompt .code-head
{background:rgba(173,140,255,.10)}
#workshop-content .code-wrap.prompt .code-label
{color:#C9A2FF; font-weight:700}
#workshop-content .code-wrap.prompt .code-label::before
{content:"✳ "; color:#AD8CFF}
#workshop-content .code-wrap.prompt .copy-btn
{border-color:rgba(173,140,255,.45); color:#C9A2FF}
html[data-theme="light"] #workshop-content .code-wrap.prompt
{border-left-color:#6B46C1; border-color:rgba(107,70,193,.38)}
html[data-theme="light"] #workshop-content .code-wrap.prompt .code-head
{background:rgba(107,70,193,.07)}
html[data-theme="light"] #workshop-content .code-wrap.prompt .code-label
{color:#6B46C1}
html[data-theme="light"] #workshop-content .code-wrap.prompt .code-label::before
{color:#6B46C1}
html[data-theme="light"] #workshop-content .code-wrap.prompt .copy-btn
{border-color:rgba(107,70,193,.45); color:#6B46C1}
html[data-theme="light"] #workshop-content .part-divider
{background:linear-gradient(135deg,#EFE9FB 0%,#F3F4F7 65%); border-color:#C9B8F0}
html[data-theme="light"] #workshop-content .part-divider .rules span
{background:#EDE6FB; border-color:#C9B8F0; color:#5B3FA8}
@media  print{#workshop-content #themeToggle
{display:none}}
#workshop-content text
{font-family:var(--font-body)}
#workshop-content .fm
{fill:#12181F}
#workshop-content .fms
{fill:rgba(18,24,31,.78)}
html[data-theme="light"] #workshop-content .fm
{fill:#FFFFFF}
html[data-theme="light"] #workshop-content .fms
{fill:rgba(255,255,255,.88)}
@media  (prefers-color-scheme: light){html:not([data-theme="dark"]) #workshop-content .fm
{fill:#FFFFFF}
html:not([data-theme="dark"]) #workshop-content .fms
{fill:rgba(255,255,255,.88)}}