/* 모든 웹 화면의 색, 크기, 상태를 관리하는 정본. 브랜드 이미지의 색은 tokens.json을 유지한다. */
:root {
  color-scheme: light;
  --bg: #ffffff; --card: #ffffff; --ink: #1b2925; --muted: #65716d;
  --line: #e2e7e5; --soft: #f3f6f5; --accent: #a8d6bf;
  --action: var(--forest); --actionInk: #ffffff;
  --stop: #983e36; --stopSoft: #fff0ec; --ok: #236443; --okSoft: #edf6ef;
  --disabled: #89918c; --inputLine: #d4dcd7; --focus: #368663;
  --heroLine: #315446; --heroAccent: #d8e7c7; --heroMuted: #d2dfd2;
  --heroCaption: #c9d7cc; --heroShadow: #0a241c66; --heroImageLine: #e1e1c4;
  --productShadow: #153d3206;
  --imageMat: #ffffff;
  --headerIconSize: 32px; --headerIconGap: 4px;
  --treeTagGap: var(--size20); --captionAccent: var(--action); --captionLeading: 1.95;
  --sea: var(--action); --seaSoft: var(--soft);
  --fontBody: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --stroke: 1px; --focusOffset: 2px; --hoverBrightness: .97;
  --motionFast: .18s; --bodyLeading: 1.7;
  --motionSpin: .75s; --toastWidth: 380px;
  --diffAdd: var(--okSoft); --diffRemove: var(--stopSoft); --diffAddMark: #b8e4c6; --diffRemoveMark: #f5c4bd;
  --headerSurface: var(--bg); --imageControl: #ffffffcc; --imageControlInk: #153d32;
  --imageControlHover: #ffffff; --headerHeight: 76px;
  --studioNavWidth: 60px; --studioIndexWidth: 200px; --studioCaptionMin: 320px; --studioCaptionMax: 1000px;
  --size600: 600px; --size640: 640px; --sizeMinus12: -12px;
}
:root[data-theme=dark] {
  color-scheme: dark;
  --bg: #111816; --card: #1a2420; --ink: #f3f7f5; --muted: #b0bfb3;
  --line: #35483c; --soft: #25392d; --action: #d8e7c7; --actionInk: #153d32;
  --inputLine: #526659; --focus: #a8d6bf; --disabled: #839087;
  --stop: #ffaba0; --stopSoft: #3c2422; --ok: #9bd5b2; --okSoft: #20392a;
  --diffAddMark: #365b42; --diffRemoveMark: #683d38;
}
:focus-visible { outline: var(--stroke) solid var(--focus); outline-offset: var(--focusOffset); }
.isBusy { position: relative; cursor: progress !important; }
.isBusy > * { visibility: hidden; }
.isBusy::after, .busyIndicator { content: ''; display: inline-block; width: var(--size14); height: var(--size14); border: var(--size2) solid currentColor; border-right-color: transparent; border-radius: 50%; animation: buttonSpin var(--motionSpin) linear infinite; }
.isBusy::after { position: absolute; inset: 0; margin: auto; }
@keyframes buttonSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .isBusy::after, .busyIndicator { animation: none; } }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 0; border-color: var(--focus); }
.themeToggle { display: inline-grid; place-items: center; flex: none; width: var(--size40); height: var(--size40); padding: var(--size8); border: 0; border-radius: 0; color: var(--muted); background: transparent; cursor: pointer; box-shadow: none; }
.themeToggle:hover { color: var(--ink); background: transparent; }
.headerActions, .headerActions nav { display:flex; align-items:center; gap:var(--headerIconGap); }
.headerActions { margin-left:auto; flex:none; }
.headerActions nav { margin:0; }
.headerIcon, .headerActions .themeToggle { display:inline-grid; place-items:center; flex:none; width:var(--headerIconSize); height:var(--headerIconSize); padding:var(--size6); border:0; border-radius:0; background:transparent; color:var(--muted); text-decoration:none; }
.headerIcon:hover, .headerActions .themeToggle:hover { color:var(--ink); }
.headerIcon svg, .headerActions svg { display:block; width:var(--size20); height:var(--size20); fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.directionIcon, .externalIcon { display: block; width: var(--size20); height: var(--size20); flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.imageArrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; place-items: center; width: var(--size36); height: var(--size54); padding: 0; border: 0; border-radius: var(--size8); background: var(--imageControl); color: var(--imageControlInk); cursor: pointer; opacity: .7; transition: opacity var(--motionFast), background var(--motionFast); }
.imageArrow:hover, .imageArrow:focus-visible { opacity: 1; background: var(--imageControlHover); }
.imageArrow.previous { left: var(--size8); }
.imageArrow.next { right: var(--size8); }
.themeToggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.themeToggle .sunIcon { display: none; }
.brandMark { display: inline-block; width: 32px; height: 32px; flex: none; background: var(--brandSurface, var(--action)); mask: var(--brandMask, url('/assets/symbol.svg') center / contain no-repeat); }
.productPhoto { display: block; position: relative; aspect-ratio: 1; overflow: hidden; background: var(--imageMat); }
.productPhoto img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* 쿠팡 120 × 240 배너 원본에서 사진 영역만 표시한다. 원본 픽셀은 수정하지 않는다. */
.productPhoto.bannerVertical img { position: absolute; width: 109.0909%; height: auto; max-width: none; left: -4.5455%; top: -33.6364%; }
[data-theme=dark] .themeToggle .sunIcon { display: block; }
[data-theme=dark] .themeToggle .moonIcon { display: none; }
@media (prefers-reduced-motion: reduce) { :root { --motionFast: 0s; } }

:root {
  --sizeMinus4: -4px;
  --sizeMinus2: -2px;
  --sizeMinus1: -1px;
  --size1: 1px;
  --size2: 2px;
  --size3: 3px;
  --size4: 4px;
  --size5: 5px;
  --size6: 6px;
  --size7: 7px;
  --size8: 8px;
  --size9: 9px;
  --size10: 10px;
  --size11: 11px;
  --size12: 12px;
  --size13: 13px;
  --size14: 14px;
  --size15: 15px;
  --size16: 16px;
  --size17: 17px;
  --size18: 18px;
  --size20: 20px;
  --size21: 21px;
  --size22: 22px;
  --size23: 23px;
  --size24: 24px;
  --size25: 25px;
  --size26: 26px;
  --size28: 28px;
  --size29: 29px;
  --size30: 30px;
  --size31: 31px;
  --size32: 32px;
  --size34: 34px;
  --size35: 35px;
  --size36: 36px;
  --size40: 40px;
  --size42: 42px;
  --size43: 43px;
  --size44: 44px;
  --size45: 45px;
  --size46: 46px;
  --size48: 48px;
  --size49: 49px;
  --size50: 50px;
  --size54: 54px;
  --size57: 57px;
  --size60: 60px;
  --size62: 62px;
  --size64: 64px;
  --size72: 72px;
  --size76: 76px;
  --size80: 80px;
  --size82: 82px;
  --size110: 110px;
  --size114: 114px;
  --size128: 128px;
  --size140: 140px;
  --size200: 200px;
  --size240: 240px;
  --size280: 280px;
  --size284: 284px;
  --size300: 300px;
  --size340: 340px;
  --size350: 350px;
  --size390: 390px;
  --size400: 400px;
  --size435: 435px;
  --size440: 440px;
  --size450: 450px;
  --size480: 480px;
  --size500: 500px;
  --size604: 604px;
  --size610: 610px;
  --size640: 640px;
  --size700: 700px;
  --size720: 720px;
  --size760: 760px;
  --size800: 800px;
  --size820: 820px;
  --size890: 890px;
  --size900: 900px;
  --size950: 950px;
  --size1000: 1000px;
  --size1100: 1100px;
  --size1216: 1216px;
  --size1800: 1800px;
}