:root { color-scheme: light; --ink:#202720; --muted:#697264; --accent:#4d6335; --soft:#eef1e5; --line:#dfe3d9; --surface:#f7f8f5; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--white); }
body { margin:0; color:var(--ink); font-family:Arial,'Apple SD Gothic Neo','Noto Sans KR',sans-serif; -webkit-font-smoothing:antialiased; }
body.cream { --ink:#172b24; --muted:#63776c; --accent:#096647; --soft:#e8f5eb; --line:#d9e6dc; --surface:#f4f8f4; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; }
button { font:inherit; }
[hidden] { display:none !important; }
.skip-link { position:fixed; left:16px; top:-80px; z-index:100; padding:12px; background:var(--ink); color:#fff; }
.skip-link:focus { top:12px; }
.site-header { height:76px; display:flex; justify-content:space-between; align-items:center; padding:0 clamp(20px,5vw,70px); border-bottom:1px solid var(--line); }
.store-logo { display:inline-flex; align-items:center; }
.store-logo img { display:block; width:150px; height:auto; }
.header-link { text-decoration:none; display:inline-flex; align-items:center; gap:16px; font-size:14px; }
.header-link span { font-size:18px; }
.section { width:min(1120px,100%); margin:0 auto; padding:76px 36px; }
.hero { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:72px; align-items:center; padding-top:48px; padding-bottom:62px; }
.product-gallery { min-width:0; }
.photo-stage { overflow:hidden; background:#f6f6f6; aspect-ratio:1; }
.photo-stage img { width:100%; height:100%; display:block; object-fit:contain; }
.thumbnails { display:flex; gap:10px; margin-top:14px; }
.gallery-button { width:58px; height:58px; padding:0; background:#fff; border:1px solid var(--line); cursor:pointer; }
.gallery-button[aria-pressed=true] { border:2px solid var(--accent); }
.gallery-button img { display:block; width:100%; height:100%; object-fit:contain; }
.product-brand { margin:0 0 20px; color:var(--accent); font-size:14px; font-weight:700; }
.hero-copy h1 { margin:0; font-size:clamp(34px,3.6vw,47px); font-weight:600; letter-spacing:-.065em; line-height:1.36; word-break:keep-all; }
.hero-copy h1 span { display:block; }
.product-name { margin:20px 0 0; color:var(--muted); font-size:16px; line-height:1.7; word-break:keep-all; }
.product-name small { display:inline-block; color:var(--ink); font-size:14px; white-space:nowrap; margin-left:5px; }
.hero-intro { margin:26px 0 0; font-size:16px; color:var(--muted); line-height:1.85; word-break:keep-all; }
.product-tags { display:flex; gap:8px; padding:0; list-style:none; margin:24px 0 30px; flex-wrap:wrap; }
.product-tags li { font-size:13px; border:1px solid var(--line); border-radius:40px; padding:8px 12px; }
.button { display:inline-flex; gap:20px; align-items:center; justify-content:space-between; min-height:52px; padding:0 22px; background:var(--accent); color:#fff; font-size:14px; font-weight:700; text-decoration:none; border:1px solid var(--accent); }
.button:hover { filter:brightness(.93); }
.text-link { display:inline-flex; margin-top:18px; font-size:13px; color:var(--muted); text-underline-offset:5px; }
.name-band { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); }
.name-band>div { width:min(1120px,100%); margin:0 auto; padding:24px 36px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.name-band strong { font-family:Georgia,'Times New Roman',serif; font-size:25px; font-weight:400; letter-spacing:.06em; }
.name-band span { font-size:11px; letter-spacing:.13em; line-height:1.6; text-align:right; }
.story { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:80px; }
.eyebrow { margin:0 0 18px; color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.15em; }
.section h2 { font-size:34px; font-weight:500; letter-spacing:-.055em; line-height:1.4; margin:0; word-break:keep-all; }
.story p:not(.eyebrow) { margin:22px 0 0; color:var(--muted); font-size:16px; line-height:1.9; word-break:keep-all; }
.story figure { margin:0; min-width:0; }
.story img { width:100%; height:auto; display:block; }
.story figcaption { margin-top:10px; font-size:12px; color:var(--muted); }
.features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:38px; border-top:1px solid var(--line); padding-top:46px; padding-bottom:60px; }
.feature { min-width:0; }
.feature>span { color:var(--accent); font-family:Georgia,serif; font-size:14px; }
.feature h3 { margin:18px 0 12px; font-size:20px; font-weight:600; letter-spacing:-.04em; }
.feature p { color:var(--muted); margin:0; font-size:15px; line-height:1.8; word-break:keep-all; }
.notes { background:var(--soft); }
.notes .section { display:grid; grid-template-columns:1fr 1.4fr; align-items:center; gap:50px; padding-top:45px; padding-bottom:45px; }
.notes h2 { font-size:26px; }
.notes-list { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.note dt { color:var(--accent); font-size:11px; letter-spacing:.1em; margin-bottom:12px; }
.note dd { margin:0; font-size:15px; line-height:1.7; word-break:keep-all; }
.videos { border-top:1px solid var(--line); }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:30px; }
.section-heading>p { font-size:14px; color:var(--muted); line-height:1.7; max-width:360px; margin:0; }
.video-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.video-card { min-width:0; }
.video-surface { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--soft); }
.video-open { width:100%; height:100%; padding:0; border:0; cursor:pointer; background:transparent; }
.video-open img { width:100%; height:100%; display:block; object-fit:contain; }
.video-open>span { position:absolute; inset:auto 18px 18px; display:flex; justify-content:space-between; align-items:center; color:#fff; background:rgba(15,38,27,.8); font-size:14px; padding:12px 16px; }
.video-open b { font-size:16px; font-weight:400; }
.video-surface iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-card h3 { font-size:18px; margin:20px 0 8px; font-weight:600; letter-spacing:-.03em; }
.video-card p { font-size:14px; color:var(--muted); line-height:1.75; margin:0; }
.video-meta { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:14px; }
.video-meta a { font-size:12px; color:var(--muted); text-underline-offset:4px; }
.video-close { border:1px solid var(--line); background:#fff; padding:7px 10px; font-size:12px; cursor:pointer; }
.routine { display:grid; grid-template-columns:1fr 1fr; gap:80px; border-top:1px solid var(--line); }
.routine ol { list-style:none; padding:0; margin:0; }
.routine li { display:flex; gap:24px; border-bottom:1px solid var(--line); padding:20px 0; color:var(--muted); font-size:15px; line-height:1.8; }
.routine li:first-child { padding-top:0; }
.routine li>span { color:var(--accent); font-size:12px; }
.product-information { background:var(--surface); }
.product-information .section { padding-top:46px; padding-bottom:46px; }
.info-table { display:grid; grid-template-columns:1fr 1fr; gap:0 54px; margin:24px 0 0; }
.info-table>div { display:grid; grid-template-columns:80px 1fr; gap:18px; border-bottom:1px solid var(--line); padding:16px 0; font-size:14px; line-height:1.6; }
.info-table dt { color:var(--muted); }
.info-table dd { margin:0; }
.small-note { margin:20px 0 0; font-size:12px; color:var(--muted); line-height:1.8; }
.detail-disclosure { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:0; }
.detail-disclosure summary { padding:27px 36px; font-size:16px; cursor:pointer; }
.detail-images { max-width:800px; margin:0 auto; padding:0 24px 36px; }
.detail-images img { width:100%; height:auto; display:block; }
.closing { text-align:center; padding-top:68px; padding-bottom:68px; }
.closing h2 { font-size:28px; }
.closing p { color:var(--muted); font-size:15px; line-height:1.8; margin:16px 0 26px; }
.site-footer { border-top:1px solid var(--line); padding:26px 36px; width:min(1120px,100%); margin:0 auto; display:flex; justify-content:space-between; gap:20px; font-size:11px; color:var(--muted); line-height:1.7; }
.mobile-cta { display:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
@media(max-width:960px) { .hero,.story,.routine { gap:38px; } .section { padding-inline:26px; } .hero-copy h1 { font-size:35px; } }
@media(max-width:680px) {
  body { padding-bottom:calc(80px + env(safe-area-inset-bottom)); }
  .site-header { height:64px; padding:0 20px; }
  .store-logo img { width:126px; }
  .header-link { font-size:12px; gap:8px; }
  .section { padding:48px 22px; }
  .hero { grid-template-columns:1fr; padding:20px 20px 38px; gap:30px; }
  .photo-stage { aspect-ratio:1; }
  .thumbnails { gap:8px; margin-top:12px; }
  .gallery-button { width:48px; height:48px; }
  .product-brand { margin-bottom:14px; font-size:13px; }
  .hero-copy h1 { font-size:34px; }
  .product-name { font-size:15px; margin-top:14px; }
  .hero-intro { margin-top:20px; font-size:15px; }
  .product-tags { margin:20px 0 24px; }
  .hero-copy .button { width:100%; }
  .name-band>div { padding:22px; flex-direction:column; gap:10px; align-items:flex-start; }
  .name-band strong { font-size:23px; }
  .name-band span { font-size:10px; text-align:left; }
  .story { grid-template-columns:1fr; gap:28px; }
  .section h2 { font-size:29px; }
  .story p:not(.eyebrow) { font-size:15px; margin-top:16px; }
  .features { grid-template-columns:1fr; gap:28px; padding-top:34px; padding-bottom:40px; }
  .feature h3 { margin:10px 0 8px; font-size:19px; }
  .notes .section { grid-template-columns:1fr; gap:26px; }
  .notes-list { gap:12px; }
  .note dd { font-size:13px; }
  .section-heading { align-items:flex-start; flex-direction:column; gap:14px; }
  .video-grid { grid-template-columns:1fr; gap:36px; }
  .routine { grid-template-columns:1fr; gap:26px; }
  .info-table { grid-template-columns:1fr; }
  .detail-disclosure summary { padding:24px 22px; }
  .detail-images { padding:0 0 24px; }
  .closing h2 { font-size:25px; }
  .site-footer { padding:24px 22px; flex-direction:column; gap:6px; }
  .mobile-cta { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:10; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); border-top:1px solid var(--line); backdrop-filter:blur(14px); }
  .mobile-cta a { width:100%; min-height:48px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }