@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Noto+Sans+TC:wght@400;500;700&family=Noto+Serif+TC:wght@600;900&display=swap');

#article {
  --hw-paper: #f4f1ea;
  --hw-panel: #fff;
  --hw-panel-2: #fbfaf7;
  --hw-line: #e7e2d6;
  --hw-cyan: #2cc4c9;
  --hw-cyan-deep: #189aa0;
  --hw-text: #241f18;
  --hw-text-2: #5c5546;
  --hw-text-3: #847c6c;
  --hw-ok: #2e8f68;
  --hw-soon: #b9791a;
  --hw-serif: 'Noto Serif TC', serif;
  --hw-sans: 'Noto Sans TC', sans-serif;
  --hw-mono: 'JetBrains Mono', monospace;
}

#article .housework-page { background: #fff; color: var(--hw-text); font-family: var(--hw-sans); line-height: 1.7; }
#article .housework-page * { box-sizing: border-box; }
#article .housework-page a { color: inherit; text-decoration: none; }
#article .housework-page img { max-width: 100%; }
#article .hw-breadcrumb { border-bottom: 1px solid #ebebeb; background: #fff; }
#article .hw-breadcrumb > div { max-width: 1280px; margin: 0 auto; padding: 14px 24px; color: #8a8f98; font-size: 14px; }
#article .hw-breadcrumb a:hover { color: var(--hw-cyan-deep); }
#article .hw-wrap { max-width: 1180px; margin: 0 auto; padding-right: 24px; padding-left: 24px; }
#article .hw-eyebrow { color: var(--hw-cyan-deep); font-family: var(--hw-mono); font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; }
#article .hw-stamp { display: inline-block; border: 1.5px solid currentColor; border-radius: 3px; padding: 2px 9px; font-family: var(--hw-mono); font-size: 11px; letter-spacing: 2px; }
#article .hw-stamp.case { color: var(--hw-cyan-deep); }
#article .hw-stamp.ok { color: var(--hw-ok); }
#article .hw-stamp.soon { color: var(--hw-soon); }

#article .hw-hero { border-bottom: 1px solid var(--hw-line); background: linear-gradient(180deg, #f0fbfb 0%, #fff 100%); }
#article .hw-hero-in { display: grid; max-width: 1180px; margin: 0 auto; padding: 64px 24px 56px; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
#article .hw-agency-mark { display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px; }
#article .hw-agency-mark b { color: var(--hw-text); font-family: var(--hw-serif); font-size: 20px; font-weight: 900; letter-spacing: 3px; }
#article .hw-agency-mark span { color: var(--hw-text-3); font-family: var(--hw-mono); font-size: 11px; letter-spacing: 3px; }
#article .hw-hero h1,
#article .hw-detail-hero h1 { margin: 16px 0 14px; color: var(--hw-text); font-family: var(--hw-serif); font-size: clamp(28px, 4vw, 42px); font-weight: 900; line-height: 1.35; }
#article .hw-lede { max-width: 38em; margin-bottom: 14px; color: var(--hw-text-2); font-size: 15.5px; }
#article .hw-lede b { color: var(--hw-text); }
#article .hw-hero-copy { max-width: 38em; color: var(--hw-text-2); font-size: 15.5px; }
#article .hw-hero-copy p { margin: 0 0 14px; }
#article .hw-hero-copy strong { color: var(--hw-text); }
#article .hw-hero-screen { overflow: hidden; position: relative; border: 1px solid var(--hw-line); border-radius: 12px; background: #1e2b2c; aspect-ratio: 16/9; }
#article .hw-hero-screen img { width: 100%; height: 100%; object-fit: cover; }
#article .hw-hero-placeholder { display: flex; width: 100%; height: 100%; color: #aec6c7; font-family: var(--hw-serif); font-size: 24px; align-items: center; justify-content: center; }
#article .hw-actions { display: flex; margin-top: 22px; gap: 12px; flex-wrap: wrap; }
#article .hw-btn { display: inline-flex; border: 1px solid transparent; border-radius: 8px; padding: 11px 20px; font-size: 15px; font-weight: 500; align-items: center; gap: 8px; }
#article .hw-btn-primary { background: var(--hw-cyan); color: #fff !important; }
#article .hw-btn-primary:hover { background: #3fd2d6; }
#article .hw-btn-ghost { border-color: var(--hw-line); background: #fff; }
#article .hw-btn-ghost:hover { border-color: var(--hw-text-3); }

#article .hw-season-switcher { border-bottom: 1px solid var(--hw-line); background: #fbfaf7; }
#article .hw-season-switcher > div { display: flex; overflow-x: auto; max-width: 1180px; margin: 0 auto; padding: 12px 24px; gap: 10px; }
#article .hw-season-switcher a { display: flex; border: 1px solid var(--hw-line); border-radius: 999px; padding: 7px 14px; background: #fff; color: var(--hw-text-2); font-family: var(--hw-mono); font-size: 12px; white-space: nowrap; align-items: center; gap: 8px; }
#article .hw-season-switcher a span { font-family: var(--hw-sans); }
#article .hw-season-switcher a:hover,
#article .hw-season-switcher a.active { border-color: var(--hw-cyan); background: #e7f9fa; color: var(--hw-cyan-deep); }

#article .hw-story { margin-top: 56px; border: 1px solid #d8eeee; border-radius: 14px; padding: 34px 36px; background: #f3fbfb; }
#article .hw-row-head { display: flex; margin: 64px 0 18px; align-items: baseline; gap: 14px; flex-wrap: wrap; }
#article .hw-story .hw-row-head { margin-top: 0; }
#article .hw-row-head h2 { margin: 0; color: var(--hw-text); font-family: var(--hw-serif); font-size: 26px; font-weight: 900; letter-spacing: 1px; }
#article .hw-row-head .sub { color: var(--hw-text-2); font-size: 14px; }
#article .hw-row-head .spec { margin-left: auto; color: var(--hw-text-3); font-family: var(--hw-mono); font-size: 11px; letter-spacing: 1px; }
#article .hw-story-copy { width: 100%; max-width: none; color: var(--hw-text-2); font-size: 15px; }
#article .hw-story-copy p { margin-bottom: 10px; }
#article .hw-story-copy strong,
#article .hw-story-copy b { color: var(--hw-text); }
#article .hw-story-flow { width: 100%; max-width: none; }
#article .hw-story-flow > p { max-width: 46em; }
#article .hw-process { margin: 10px 0 !important; color: var(--hw-cyan-deep); font-family: var(--hw-serif); font-size: 17px; font-weight: 900; letter-spacing: 1px; }
#article .hw-arc { display: grid; width: 100%; margin-top: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#article .hw-story-flow > .hw-arc + p { margin-top: 22px; }
#article .hw-step { border: 1px solid var(--hw-line); border-radius: 12px; padding: 20px 22px; background: #fff; }
#article .hw-step b { display: block; margin: 6px 0; font-family: var(--hw-serif); font-size: 18px; font-weight: 900; }
#article .hw-step p { color: var(--hw-text-2); font-size: 13.5px; }
#article .hw-tracks { display: grid; margin-top: 14px; grid-template-columns: 1fr 1fr; gap: 14px; }
#article .hw-track { border: 1px dashed #c3e4e5; border-radius: 12px; padding: 16px 20px; color: var(--hw-text-2); font-size: 13.5px; }
#article .hw-track b { display: block; margin-bottom: 4px; color: var(--hw-cyan-deep); font-family: var(--hw-mono); font-size: 12px; letter-spacing: 2px; }

#article .hw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; }
#article .hw-card { display: flex; min-width: 0; flex-direction: column; }
#article .hw-thumb { display: flex; overflow: hidden; position: relative; border: 1px solid var(--hw-line); border-radius: 12px; background: radial-gradient(100% 100% at 50% 0%, #26454a 0%, #162628 70%); aspect-ratio: 16/9; align-items: center; justify-content: center; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
#article .hw-thumb.theme-glass { background: radial-gradient(100% 100% at 50% 0%, #26454a 0%, #162628 70%); }
#article .hw-thumb.theme-bowl { background: radial-gradient(100% 100% at 50% 0%, #4a3b22 0%, #262013 70%); }
#article .hw-thumb.theme-guide { background: radial-gradient(100% 100% at 50% 0%, #2f4e52 0%, #1a2c2e 70%); }
#article .hw-thumb.theme-family { background: radial-gradient(100% 100% at 50% 0%, #2c4438 0%, #182620 70%); }
#article .hw-thumb.theme-home { background: radial-gradient(100% 100% at 50% 0%, #3f3428 0%, #211b14 70%); }
#article .hw-thumb.theme-studio { background: radial-gradient(100% 100% at 50% 0%, #43301f 0%, #231a11 70%); }
#article .hw-thumb.theme-chef { background: radial-gradient(100% 100% at 50% 0%, #4a2c1e 0%, #241610 70%); }
#article .hw-thumb.theme-camp { background: radial-gradient(100% 100% at 50% 0%, #2b3a2e 0%, #161f19 70%); }
#article .hw-thumb.theme-baby { background: radial-gradient(100% 100% at 50% 0%, #3d3547 0%, #201c26 70%); }
#article .hw-card:hover .hw-thumb { transform: translateY(-3px); border-color: #7bd5d8; box-shadow: 0 10px 24px rgba(24,154,160,.14); }
#article .hw-thumb > img { position: absolute; z-index: 0; width: 100%; height: 100%; object-fit: cover; inset: 0; }
#article .hw-thumb::after { position: absolute; z-index: 1; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.7)); content: ''; inset: 0; }
#article .hw-play { display: flex; z-index: 4; width: 46px; height: 46px; border: 1.5px solid rgba(237,245,245,.78); border-radius: 50%; background: rgba(20,24,24,.4); color: #f4f9f9; align-items: center; justify-content: center; }
#article .hw-card-label { position: absolute; z-index: 5; top: 12px; left: 12px; }
#article .hw-thumb-title { position: absolute; z-index: 4; right: 14px; bottom: 12px; left: 14px; color: #f4f9f9; font-family: var(--hw-serif); font-size: 15px; font-weight: 900; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
#article .hw-card-meta { padding: 12px 4px 0; }
#article .hw-card-meta h3 { margin: 2px 0 5px; color: var(--hw-text); font-family: var(--hw-serif); font-size: 16.5px; font-weight: 900; line-height: 1.45; }
#article .hw-card-meta p { color: var(--hw-text-2); font-size: 13px; }
#article .hw-card-date { display: block; margin-top: 7px; color: var(--hw-text-3); font-family: var(--hw-mono); font-size: 11px; letter-spacing: 1px; }
#article .hw-empty { grid-column: 1/-1; border: 1px dashed var(--hw-line); border-radius: 12px; padding: 36px; color: var(--hw-text-3); text-align: center; }
#article .hw-list-note { margin-top: 12px; color: var(--hw-text-3); font-family: var(--hw-mono); font-size: 11px; letter-spacing: 1px; }

#article .hw-closing { display: grid; margin-top: 64px; grid-template-columns: 1.25fr .75fr; gap: 16px; padding-bottom: 60px; }
#article .hw-archive,
#article .hw-recruit { border: 1px solid var(--hw-line); border-radius: 12px; padding: 26px 28px; }
#article .hw-archive h2,
#article .hw-recruit h2 { margin: 6px 0; font-family: var(--hw-serif); font-size: 21px; font-weight: 900; }
#article .hw-archive .sub,
#article .hw-recruit p { margin-bottom: 16px; color: var(--hw-text-2); font-size: 14px; }
#article .hw-archive ul { margin: 0; padding: 0; list-style: none; }
#article .hw-archive li { border-top: 1px solid var(--hw-line); }
#article .hw-archive li:first-child { border-top: 0; }
#article .hw-archive li a { display: flex; padding: 13px 2px; color: var(--hw-text-2); font-size: 14px; justify-content: space-between; gap: 16px; }
#article .hw-archive .date { color: var(--hw-text-3); font-family: var(--hw-mono); font-size: 11px; white-space: nowrap; }
#article .hw-recruit { background: linear-gradient(160deg, #e7f9fa 0%, #d2f1f2 100%); }
#article .hw-recruit small { display: block; margin-top: 14px; color: var(--hw-text-3); font-size: 12px; }

#article .hw-detail-hero { border-bottom: 1px solid var(--hw-line); background: linear-gradient(180deg, #f0fbfb 0%, #fff 100%); }
#article .hw-detail-hero > div { max-width: 1180px; margin: 0 auto; padding: 52px 24px 42px; }
#article .hw-detail-hero h1 { max-width: 900px; font-size: clamp(26px, 3.6vw, 38px); }
#article .hw-detail-body { max-width: 1180px; margin: 40px auto 0; padding: 0 24px; }
#article .hw-detail-body.vertical { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 40px; align-items: start; }
#article .hw-player { overflow: hidden; width: 100%; border: 1px solid var(--hw-line); border-radius: 12px; background: #000; aspect-ratio: 16/9; }
#article .hw-detail-body.vertical .hw-player { position: sticky; top: 24px; width: 100%; max-width: 420px; margin: 0; aspect-ratio: 9/16; }
#article .hw-detail-body.vertical .hw-rich-content { margin-top: 0; }
#article .hw-player iframe { width: 100%; height: 100%; border: 0; }
#article .hw-player-empty { display: flex; height: 100%; padding: 20px; color: #a9b7b7; font-family: var(--hw-mono); font-size: 12px; letter-spacing: 1.5px; text-align: center; align-items: center; justify-content: center; }
#article .hw-rich-content { width: 100%; margin-top: 40px; color: var(--hw-text-2); font-size: 15px; }
#article .hw-rich-content h2,
#article .hw-rich-content h3 { margin: 28px 0 10px; color: var(--hw-text); font-family: var(--hw-serif); font-weight: 900; line-height: 1.45; }
#article .hw-rich-content h2:first-child,
#article .hw-rich-content h3:first-child { margin-top: 0; }
#article .hw-rich-content p { margin-bottom: 12px; }
#article .hw-rich-content blockquote { margin: 18px 0; border-left: 2px solid #6fcfd3; border-radius: 0 10px 10px 0; padding: 14px 18px; background: #f3fbfb; color: var(--hw-text); font-family: var(--hw-serif); font-size: 16px; font-weight: 600; }
#article .hw-rich-content img { display: block; height: auto; margin: 22px auto; border-radius: 10px; }
#article .hw-rich-content ul,
#article .hw-rich-content ol { margin: 10px 0 18px; padding-left: 24px; }
#article .hw-rich-content > .stamp { display: inline-block; border: 1.5px solid currentColor; border-radius: 3px; padding: 2px 9px; color: var(--hw-cyan-deep); font-family: var(--hw-mono); font-size: 11px; letter-spacing: 2px; }
#article .hw-rich-content .chapter { margin-top: 34px; }
#article .hw-rich-content .chapter:first-of-type { margin-top: 18px; }
#article .hw-rich-content .chapter .act { color: var(--hw-cyan-deep); font-family: var(--hw-mono); font-size: 11px; letter-spacing: 2.5px; }
#article .hw-rich-content .chapter h3 { margin: 6px 0 10px; font-size: 20px; }
#article .hw-rich-content .chapter p { margin-bottom: 10px; font-size: 14.5px; }
#article .hw-rich-content .voice { margin: 14px 0; border-left: 2px solid #6fcfd3; border-radius: 0 10px 10px 0; padding: 14px 18px; background: #f3fbfb; }
#article .hw-rich-content .voice p { margin: 0; color: var(--hw-text); font-family: var(--hw-serif); font-size: 15.5px; font-weight: 600; }
#article .hw-rich-content .voice small { display: block; margin-top: 8px; color: var(--hw-text-3); font-family: var(--hw-mono); font-size: 11px; letter-spacing: 1.5px; }
#article .hw-rich-content .casefile { margin-top: 36px; border: 1px solid var(--hw-line); border-radius: 12px; padding: 24px 26px; background: var(--hw-panel-2); }
#article .hw-rich-content .casefile h4 { margin: 20px 0 8px; color: var(--hw-cyan-deep); font-family: var(--hw-mono); font-size: 12px; letter-spacing: 2.5px; }
#article .hw-rich-content .casefile h4:first-child { margin-top: 0; }
#article .hw-rich-content .casefile ul { margin: 4px 0; padding-left: 20px; }
#article .hw-rich-content .casefile li { margin-bottom: 6px; color: var(--hw-text-2); font-size: 14px; }
#article .hw-rich-content .casefile li b { color: var(--hw-text); font-weight: 500; }
#article .hw-rich-content .facts { display: grid; margin: 6px 0; grid-template-columns: 1fr 1fr; gap: 10px; }
#article .hw-rich-content .facts div { border: 1px solid var(--hw-line); border-radius: 10px; padding: 12px 14px; background: #fff; color: var(--hw-text-2); font-size: 13px; }
#article .hw-rich-content .facts b { display: block; margin-bottom: 3px; color: var(--hw-text-3); font-family: var(--hw-mono); font-size: 10.5px; letter-spacing: 2px; }
#article .hw-rich-content .closed { display: flex; margin-top: 24px; border-top: 1px dashed var(--hw-line); padding-top: 18px; align-items: center; gap: 14px; flex-wrap: wrap; }
#article .hw-rich-content .closed .stamp { display: inline-block; border: 1.5px solid currentColor; border-radius: 3px; padding: 2px 9px; color: var(--hw-ok); font-family: var(--hw-mono); font-size: 11px; letter-spacing: 2px; transform: rotate(-3deg); }
#article .hw-rich-content .cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
#article .hw-rich-content .btn { display: inline-flex; border: 1px solid transparent; border-radius: 8px; padding: 12px 22px; color: var(--hw-text); font-size: 15px; font-weight: 500; align-items: center; gap: 8px; }
#article .hw-rich-content .btn-primary { background: var(--hw-cyan); color: #fff; }
#article .hw-rich-content .btn-ghost { border-color: var(--hw-line); }
#article .hw-rich-content .signup-hook { margin-top: 16px; color: var(--hw-text-3); font-size: 13px; }
#article .hw-rich-content .signup-hook a { border-bottom: 1px solid var(--hw-cyan-deep); color: var(--hw-cyan-deep); }
#article .hw-rich-content .brand-close { margin-top: 40px; border-top: 1px dashed var(--hw-line); padding-top: 26px; text-align: center; }
#article .hw-rich-content .brand-close .ke-logo { color: #143874; font-family: var(--hw-serif); font-size: 30px; font-weight: 900; letter-spacing: 2px; }
#article .hw-rich-content .brand-close p { margin-top: 10px; color: var(--hw-text); font-family: var(--hw-serif); font-size: 16px; font-weight: 600; line-height: 1.9; }
#article .hw-pager { display: flex; max-width: 1180px; margin: 56px auto 0; border-top: 1px solid var(--hw-line); padding: 24px; color: var(--hw-text-2); font-size: 14px; justify-content: space-between; gap: 14px; }
#article .hw-pager .back { margin: 0 auto; font-family: var(--hw-mono); font-size: 12px; letter-spacing: 2px; }

@media (max-width: 920px) {
  #article .hw-hero-in { padding: 44px 24px; grid-template-columns: 1fr; }
  #article .hw-story { padding: 24px 20px; }
  #article .hw-arc,
  #article .hw-tracks { grid-template-columns: 1fr; }
  #article .hw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #article .hw-closing { grid-template-columns: 1fr; }
  #article .hw-detail-body.vertical { display: block; }
  #article .hw-detail-body.vertical .hw-player { position: static; margin: 0 auto; }
  #article .hw-rich-content,
  #article .hw-detail-body.vertical .hw-rich-content { margin-top: 32px; }
}

@media (max-width: 560px) {
  #article .hw-agency-mark { align-items: flex-start; flex-direction: column; gap: 4px; }
  #article .hw-row-head { margin-top: 44px; }
  #article .hw-row-head .spec { width: 100%; margin-left: 0; }
  #article .hw-grid { grid-template-columns: 1fr; }
  #article .hw-closing { margin-top: 48px; }
  #article .hw-pager { align-items: center; flex-direction: column; }
}