/* HOLOWAY 웹 부품 묶음. web/build.mjs 가 만든 파일이라 직접 고치지 않는다. 원본: tokens/tokens.json, motif/src/motif.mjs, web/src/components.css */

/* 쓰는 법: <html data-hw-mode="paper|night|auto"> 에 <body class="hw-page">. 글꼴은 fonts/ 의 Pretendard, Archivo, JetBrains Mono. */

/* HOLOWAY 브랜드 토큰. tokens.json 에서 만든 파일이라 직접 고치지 않는다. */
/* 상태: 확정 (7단계 2026-10-24, 부드러운 방향·둥근 방향 2026-10-25). v2.0.0 태그 전에는 다른 저장소에 적용하지 않는다. */

:root {
  --hw-logo-red: #E60013;
  --hw-font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --hw-font-wide: Archivo, "Pretendard Variable", system-ui, sans-serif;
  --hw-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --hw-font-wide-stretch: 125%;
  --hw-type-display-size: 56px;
  --hw-type-display-line: 1.1;
  --hw-type-display-tracking: -0.03em;
  --hw-type-display-weight: 500;
  --hw-type-title-1-size: 36px;
  --hw-type-title-1-line: 1.25;
  --hw-type-title-1-tracking: -0.025em;
  --hw-type-title-1-weight: 500;
  --hw-type-title-2-size: 24px;
  --hw-type-title-2-line: 1.35;
  --hw-type-title-2-tracking: -0.02em;
  --hw-type-title-2-weight: 500;
  --hw-type-title-3-size: 18px;
  --hw-type-title-3-line: 1.45;
  --hw-type-title-3-tracking: -0.015em;
  --hw-type-title-3-weight: 500;
  --hw-type-body-size: 16px;
  --hw-type-body-line: 1.75;
  --hw-type-body-tracking: -0.005em;
  --hw-type-body-weight: 400;
  --hw-type-small-size: 14px;
  --hw-type-small-line: 1.65;
  --hw-type-small-tracking: 0em;
  --hw-type-small-weight: 400;
  --hw-type-caption-size: 12px;
  --hw-type-caption-line: 1.55;
  --hw-type-caption-tracking: 0em;
  --hw-type-caption-weight: 400;
  --hw-type-label-wide-size: 12px;
  --hw-type-label-wide-line: 1.2;
  --hw-type-label-wide-tracking: 0.14em;
  --hw-type-label-wide-weight: 500;
  --hw-type-number-wide-size: 48px;
  --hw-type-number-wide-line: 1;
  --hw-type-number-wide-tracking: -0.02em;
  --hw-type-number-wide-weight: 600;
  --hw-type-mono-size: 13px;
  --hw-type-mono-line: 1.45;
  --hw-type-mono-tracking: 0em;
  --hw-type-mono-weight: 400;
  --hw-radius-s: 8px;
  --hw-radius-m: 12px;
  --hw-radius-l: 20px;
  --hw-radius-pill: 999px;
  --hw-line-hair: 1px;
  --hw-line-bold: 2px;
  --hw-line-drawing: 1.5px;
  --hw-space-1: 4px;
  --hw-space-2: 8px;
  --hw-space-3: 12px;
  --hw-space-4: 16px;
  --hw-space-5: 24px;
  --hw-space-6: 32px;
  --hw-space-7: 48px;
  --hw-space-8: 64px;
  --hw-space-9: 96px;
  --hw-space-10: 128px;
  --hw-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --hw-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --hw-duration-fast: 160ms;
  --hw-duration-base: 240ms;
  --hw-duration-slow: 400ms;
  --hw-duration-scene: 1200ms;
  --hw-shadow-float: 0 12px 32px -16px rgb(0 0 0 / 0.4);
}

:root,
[data-hw-mode="paper"] {
  --hw-bg: #F8F8F6;
  --hw-bg-2: #EFF0EE;
  --hw-bg-3: #E6E7E5;
  --hw-surface: #FFFFFF;
  --hw-glaze: radial-gradient(110% 85% at 12% 0%, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0) 58%), radial-gradient(80% 70% at 100% 100%, rgb(84 96 112 / 0.10), rgb(84 96 112 / 0) 62%);
  --hw-line: #E2E3E1;
  --hw-line-strong: #C8CAC8;
  --hw-line-control: #87898A;
  --hw-text: #0A0A0A;
  --hw-text-2: #444546;
  --hw-text-3: #68696A;
  --hw-fill: #0A0A0A;
  --hw-on-fill: #FFFFFF;
  --hw-red: #E60013;
  --hw-cta: #E60013;
  --hw-on-cta: #FFFFFF;
  --hw-status-run: #D97706;
  --hw-status-run-text: #B45309;
  --hw-status-ok: #15803D;
  --hw-status-fail: #B42318;
  --hw-status-kept: #0E7490;
  --hw-status-idle: #87898A;
}

[data-hw-mode="night"] {
  --hw-bg: #111213;
  --hw-bg-2: #18191A;
  --hw-bg-3: #202122;
  --hw-surface: #18191A;
  --hw-glaze: radial-gradient(90% 75% at 15% 0%, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0) 60%), radial-gradient(60% 55% at 85% 90%, rgb(230 0 19 / 0.08), rgb(230 0 19 / 0) 65%);
  --hw-line: #28292A;
  --hw-line-strong: #3A3B3C;
  --hw-line-control: #6B6D6E;
  --hw-text: #F1F2F1;
  --hw-text-2: #B4B6B6;
  --hw-text-3: #8B8D8D;
  --hw-fill: #F1F2F1;
  --hw-on-fill: #111213;
  --hw-red: #FF3341;
  --hw-cta: #E60013;
  --hw-on-cta: #FFFFFF;
  --hw-status-run: #F59E0B;
  --hw-status-run-text: #F59E0B;
  --hw-status-ok: #22C55E;
  --hw-status-fail: #FF8A73;
  --hw-status-kept: #38BDF8;
  --hw-status-idle: #8B8D8D;
}

@media (prefers-color-scheme: dark) {
  [data-hw-mode="auto"] {
    --hw-bg: #111213;
    --hw-bg-2: #18191A;
    --hw-bg-3: #202122;
    --hw-surface: #18191A;
    --hw-glaze: radial-gradient(90% 75% at 15% 0%, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0) 60%), radial-gradient(60% 55% at 85% 90%, rgb(230 0 19 / 0.08), rgb(230 0 19 / 0) 65%);
    --hw-line: #28292A;
    --hw-line-strong: #3A3B3C;
    --hw-line-control: #6B6D6E;
    --hw-text: #F1F2F1;
    --hw-text-2: #B4B6B6;
    --hw-text-3: #8B8D8D;
    --hw-fill: #F1F2F1;
    --hw-on-fill: #111213;
    --hw-red: #FF3341;
    --hw-cta: #E60013;
    --hw-on-cta: #FFFFFF;
    --hw-status-run: #F59E0B;
    --hw-status-run-text: #F59E0B;
    --hw-status-ok: #22C55E;
    --hw-status-fail: #FF8A73;
    --hw-status-kept: #38BDF8;
    --hw-status-idle: #8B8D8D;
  }
}

/* HOLOWAY 모티프 움직임. motif/build.mjs 가 만든 파일이라 직접 고치지 않는다. */
.motif-layers .pane { transform: translate(var(--tx), var(--ty)); transition: transform 1200ms cubic-bezier(0.77, 0, 0.175, 1); transition-delay: calc((4 - var(--i)) * 40ms); }
.motif-layers.folded .pane { transform: translate(0, 0); transition: none; }
.motif-layers.breathe .drift { animation: motif-breathe 7s ease-in-out infinite alternate; }
@keyframes motif-breathe { from { transform: translate(0, 0); } to { transform: translate(var(--dx), var(--dy)); } }
.motif-line .rev { stroke-dasharray: 1; stroke-dashoffset: 0; }
.motif-line.play .rev { animation: motif-draw 1700ms cubic-bezier(0.45, 0, 0.25, 1) both; }
.motif-line.play .glow { animation: motif-glow 900ms ease-out calc(1700ms - 150ms) both; }
@keyframes motif-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes motif-glow { from { opacity: 0; } to { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .motif-layers .pane { transition: none; } .motif-layers.breathe .drift, .motif-line.play .rev, .motif-line.play .glow { animation: none; } }

/* HOLOWAY 웹 부품. 홈페이지와 Holoway AI 가 함께 쓴다 (10단계).
   값은 모두 토큰(--hw-*)에서 온다. 이 파일이 원본이고 web/holoway.css 는 node web/build.mjs 로 만든다.
   규칙: 모서리는 둥글게(8, 12, 20px), 30°는 모티프에만, 테두리 대신 톤, 빨강은 지금과 문의 하나. */

/* ---------- 바탕 ---------- */
.hw-page {
  margin: 0; min-height: 100%;
  background: var(--hw-glaze), var(--hw-bg); background-attachment: fixed;
  color: var(--hw-text); font-family: var(--hw-font-sans);
  font-size: var(--hw-type-body-size); line-height: var(--hw-type-body-line); letter-spacing: var(--hw-type-body-tracking);
  word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased;
}
.hw-page *, .hw-page *::before, .hw-page *::after { box-sizing: border-box; }
.hw-page ::selection { background: color-mix(in srgb, var(--hw-red) 18%, transparent); }
.hw-page :focus-visible { outline: 2px solid var(--hw-red); outline-offset: 3px; }
.hw-container { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: max(24px, env(safe-area-inset-left, 0px)) max(24px, env(safe-area-inset-right, 0px)); }
@media (min-width: 768px) { .hw-container { padding-inline: 64px; } }
.hw-section { padding-block: 96px; }
@media (min-width: 1024px) { .hw-section { padding-block: 128px; } }

/* ---------- 글자 ---------- */
.hw-display, .hw-h1, .hw-h2, .hw-h3 { margin: 0; text-wrap: balance; }
.hw-display { font-size: clamp(36px, 5vw, var(--hw-type-display-size)); font-weight: var(--hw-type-display-weight); line-height: var(--hw-type-display-line); letter-spacing: var(--hw-type-display-tracking); }
.hw-h1 { font-size: clamp(28px, 3.4vw, var(--hw-type-title-1-size)); font-weight: var(--hw-type-title-1-weight); line-height: var(--hw-type-title-1-line); letter-spacing: var(--hw-type-title-1-tracking); }
.hw-h2 { font-size: var(--hw-type-title-2-size); font-weight: var(--hw-type-title-2-weight); line-height: var(--hw-type-title-2-line); letter-spacing: var(--hw-type-title-2-tracking); }
.hw-h3 { font-size: var(--hw-type-title-3-size); font-weight: var(--hw-type-title-3-weight); line-height: var(--hw-type-title-3-line); letter-spacing: var(--hw-type-title-3-tracking); }
.hw-lede { font-size: 18px; line-height: 1.7; color: var(--hw-text-2); max-width: 60ch; margin: 0; text-wrap: pretty; }
.hw-small { font-size: var(--hw-type-small-size); line-height: var(--hw-type-small-line); color: var(--hw-text-2); }
.hw-caption { font-size: var(--hw-type-caption-size); line-height: var(--hw-type-caption-line); color: var(--hw-text-3); }
.hw-num { font-variant-numeric: tabular-nums; letter-spacing: 0; } /* 숫자는 Pretendard 자리 맞춤 */
.hw-code { font-family: var(--hw-font-mono); font-size: 0.92em; letter-spacing: 0; } /* 코드, 파일 이름, 색 값 */
.hw-label { font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--hw-text-3); }

/* ---------- 모서리 ---------- */
.hw-btn, .hw-input, .hw-select, .hw-textarea, .hw-toast, .hw-seg { border-radius: var(--hw-radius-m); }
.hw-card, .hw-drop { border-radius: var(--hw-radius-l); }
.hw-tag, .hw-switch input, .hw-progress, .hw-progress > span, .hw-progress > span::after { border-radius: var(--hw-radius-pill); }

/* ---------- 머리 ---------- */
.hw-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: color-mix(in srgb, var(--hw-bg) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hw-header__in { display: flex; align-items: center; gap: 32px; min-height: 72px; }
.hw-header__logo { display: block; height: 24px; margin-right: auto; color: var(--hw-text); }
.hw-header__logo svg { display: block; height: 100%; width: auto; }
.hw-nav { display: flex; gap: 28px; }
.hw-nav a { position: relative; color: var(--hw-text-2); text-decoration: none; font-size: 15px; font-weight: 500; padding-block: 6px; transition: color var(--hw-duration-fast) ease; }
.hw-nav a:hover { color: var(--hw-text); }
.hw-nav a[aria-current="page"] { color: var(--hw-text); }
.hw-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--hw-red); }
@media (max-width: 767px) { .hw-nav { display: none; } }

/* ---------- 단추 ---------- */
.hw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: inherit; font-size: 15px; font-weight: 500; letter-spacing: -0.005em;
  background: var(--hw-fill); color: var(--hw-on-fill);
  transition: transform var(--hw-duration-fast) var(--hw-ease-out), background-color var(--hw-duration-fast) ease, opacity var(--hw-duration-fast) ease;
}
.hw-btn:active { transform: scale(0.97); }
.hw-btn--s { min-height: 36px; padding: 0 14px; font-size: 14px; }
.hw-btn--l { min-height: 52px; padding: 0 26px; font-size: 16px; }
.hw-btn--cta { background: var(--hw-cta); color: var(--hw-on-cta); } /* 페이지에 하나만 */
.hw-btn--line { background: transparent; color: var(--hw-text); box-shadow: inset 0 0 0 1px var(--hw-line-control); }
.hw-btn--ghost { background: transparent; color: var(--hw-text); padding-inline: 8px; }
@media (hover: hover) and (pointer: fine) {
  .hw-btn:hover { opacity: 0.88; }
  .hw-btn--line:hover, .hw-btn--ghost:hover { background: var(--hw-bg-2); opacity: 1; }
}
.hw-btn:disabled, .hw-btn[aria-disabled="true"] { background: var(--hw-bg-3); color: var(--hw-text-3); cursor: not-allowed; transform: none; opacity: 1; }
.hw-btn--line:disabled { background: transparent; box-shadow: inset 0 0 0 1px var(--hw-line); }

/* ---------- 입력 ---------- */
.hw-field { display: grid; gap: 8px; min-width: 0; }
.hw-field > label, .hw-field__label { font-size: 14px; font-weight: 500; color: var(--hw-text); }
.hw-field__help { font-size: 13px; color: var(--hw-text-3); }
.hw-field__error { font-size: 13px; color: var(--hw-status-fail); }
.hw-input, .hw-select, .hw-textarea {
  width: 100%; min-height: 44px; padding: 10px 14px; border: 0;
  font: inherit; font-size: 16px; color: var(--hw-text);
  background: var(--hw-bg-2); box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow var(--hw-duration-fast) ease, background-color var(--hw-duration-fast) ease;
}
.hw-textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.hw-select { appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.hw-input::placeholder, .hw-textarea::placeholder { color: var(--hw-text-3); }
.hw-input:focus, .hw-select:focus, .hw-textarea:focus { outline: none; background-color: var(--hw-surface); box-shadow: inset 0 0 0 2px var(--hw-red); }
.hw-input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--hw-status-fail); }
.hw-input:disabled { color: var(--hw-text-3); box-shadow: none; }

.hw-check, .hw-radio { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; min-height: 32px; }
.hw-check input, .hw-radio input { appearance: none; margin: 0; width: 20px; height: 20px; flex: none; background: var(--hw-bg-2); box-shadow: inset 0 0 0 1px var(--hw-line-control); cursor: pointer; transition: background-color var(--hw-duration-fast) ease; }
.hw-check input { border-radius: 6px; }
.hw-check input:checked { background: var(--hw-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center / 100% no-repeat; box-shadow: none; }
/* 밤: 흰 면 위의 체크는 밤색, 고른 칸은 한 단 밝게 */
[data-hw-mode="night"] .hw-check input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%23111213' stroke-width='2'/%3E%3C/svg%3E"); }
[data-hw-mode="night"] .hw-seg button[aria-pressed="true"] { background: var(--hw-bg-3); }
@media (prefers-color-scheme: dark) {
  [data-hw-mode="auto"] .hw-check input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%23111213' stroke-width='2'/%3E%3C/svg%3E"); }
  [data-hw-mode="auto"] .hw-seg button[aria-pressed="true"] { background: var(--hw-bg-3); }
}
.hw-radio input { border-radius: 50%; } /* 원은 기능일 때만: 라디오 */
.hw-radio input:checked { box-shadow: inset 0 0 0 1px var(--hw-fill), inset 0 0 0 5px var(--hw-bg-2), inset 0 0 0 10px var(--hw-fill); }

.hw-switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15px; }
.hw-switch input { appearance: none; margin: 0; width: 44px; height: 24px; flex: none; background: var(--hw-bg-3); position: relative; cursor: pointer; transition: background-color var(--hw-duration-base) var(--hw-ease-out); }
.hw-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--hw-surface); transition: transform var(--hw-duration-base) var(--hw-ease-out); }
.hw-switch input:checked { background: var(--hw-fill); }
.hw-switch input:checked::after { transform: translateX(20px); background: var(--hw-on-fill); }

/* 고르기 묶음 (두세 가지 중 하나) */
.hw-seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--hw-bg-2); }
.hw-seg button { font: inherit; font-size: 14px; font-weight: 500; min-height: 38px; padding: 0 16px; border: 0; background: transparent; color: var(--hw-text-2); cursor: pointer; border-radius: calc(var(--hw-radius-m) - 3px);
  transition: background-color var(--hw-duration-fast) ease, color var(--hw-duration-fast) ease; }
.hw-seg button[aria-pressed="true"] { background: var(--hw-surface); color: var(--hw-text); box-shadow: inset 0 -2px 0 var(--hw-red); }

/* ---------- 탭 ---------- */
.hw-tabs { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; }
.hw-tab { position: relative; font: inherit; font-size: 15px; font-weight: 500; padding: 12px 0; border: 0; background: none; color: var(--hw-text-3); cursor: pointer; white-space: nowrap; transition: color var(--hw-duration-fast) ease; }
.hw-tab:hover { color: var(--hw-text-2); }
.hw-tab[aria-selected="true"] { color: var(--hw-text); }
.hw-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--hw-red); }

/* ---------- 표시 ---------- */
.hw-tag { justify-self: start; width: fit-content; display: inline-flex; align-items: center; min-height: 24px; padding: 0 11px; font-size: 13px; font-weight: 500; background: var(--hw-bg-2); color: var(--hw-text-2); }
.hw-tag--dev { background: transparent; box-shadow: inset 0 0 0 1px var(--hw-line-strong); color: var(--hw-text-3); } /* 개발 중: 비어 있는 표시 */

/* 상태: 모서리가 둥근 육각 표시와 글자를 늘 함께 */
.hw-status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--hw-text); }
.hw-status::before { content: ""; width: 14px; height: 16px; flex: none; background: var(--hw-st, var(--hw-status-idle));
  -webkit-mask: var(--hw-hex) center / contain no-repeat; mask: var(--hw-hex) center / contain no-repeat; }
.hw-page { --hw-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M7 1.6 L12.4 4.7 V11.3 L7 14.4 L1.6 11.3 V4.7 Z' fill='black' stroke='black' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hw-status[data-state="run"] { --hw-st: var(--hw-status-run); }
.hw-status[data-state="run"]::before { background: linear-gradient(to top, var(--hw-status-run) 50%, color-mix(in srgb, var(--hw-status-run) 30%, transparent) 50%); }
.hw-status[data-state="ok"] { --hw-st: var(--hw-status-ok); }
.hw-status[data-state="fail"] { --hw-st: var(--hw-status-fail); }
.hw-status[data-state="kept"] { --hw-st: var(--hw-status-kept); }
.hw-status[data-state="idle"]::before { background: color-mix(in srgb, var(--hw-status-idle) 45%, transparent); }

/* 진행 막대: 지난 칸은 먹, 지금 칸은 빨강 */
.hw-progress { position: relative; height: 4px; background: var(--hw-bg-3); overflow: hidden; }
.hw-progress > span { position: absolute; inset: 0 auto 0 0; width: var(--hw-value, 0%); background: var(--hw-text); transition: width var(--hw-duration-slow) var(--hw-ease-out); }
.hw-progress > span::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 12px; background: var(--hw-red); }

/* ---------- 판 ---------- */
.hw-card { background: var(--hw-surface); padding: 24px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.hw-card--quiet { background: var(--hw-bg-2); }
a.hw-card { color: inherit; text-decoration: none; transition: transform var(--hw-duration-base) var(--hw-ease-out); }
@media (hover: hover) and (pointer: fine) { a.hw-card:hover { transform: translateY(-2px); } }

/* 올리기 칸 */
.hw-drop { display: grid; place-items: center; gap: 8px; text-align: center; min-height: 168px; padding: 32px 24px; background: var(--hw-bg-2); color: var(--hw-text-2); cursor: pointer; transition: background-color var(--hw-duration-fast) ease; }
.hw-drop:hover, .hw-drop[data-over="true"] { background: var(--hw-surface); box-shadow: inset 0 -2px 0 var(--hw-red); }
.hw-drop strong { color: var(--hw-text); font-weight: 500; font-size: 16px; }

/* 알림: 위에 뜨는 것이라 그림자 하나 */
.hw-toast { display: flex; align-items: center; gap: 12px; padding: 14px 18px; min-width: 280px; max-width: 420px; background: #18191A; color: #F1F2F1; box-shadow: var(--hw-shadow-float); font-size: 14px; }

/* ---------- 모티프 자리 (30°는 여기에만) ---------- */
.hw-motif-line { display: block; width: 100%; max-width: 360px; height: auto; }
.hw-motif-line svg, .hw-motif-layers svg { display: block; width: 100%; height: 100%; }
.hw-motif-layers { display: block; width: 100%; aspect-ratio: 4 / 3; }

/* ---------- 바닥 ---------- */
.hw-footer { padding-block: 64px 48px; color: var(--hw-text-2); font-size: 14px; }
.hw-footer a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .hw-page *, .hw-page *::before, .hw-page *::after { transition-duration: 0ms !important; }
  .hw-btn:active { transform: none; }
}