/* 원본 옵션 순서와 묶음을 유지한 모션데스크 조합 */
.composer-heading{padding:44px 0 24px;border-bottom:1px solid var(--line);margin-bottom:28px}.composer-heading h1{font-size:clamp(30px,4vw,48px);line-height:1.2;letter-spacing:-.04em}.composer-heading p{font-size:14px;line-height:1.8;color:var(--muted);margin:16px 0 0}.desk-composer{padding-bottom:64px}
.lunaPreview{position:relative;display:block;width:100%;max-width:860px;margin:0 auto}.lunaPreview>input[type="radio"]{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;clip-path:inset(50%);pointer-events:none;margin:0!important}.lunaPreview *{box-sizing:border-box;font-family:inherit}
.lunaPreview .previewVisual{position:relative;top:auto;width:100%;height:auto;aspect-ratio:860/570;isolation:isolate;background:var(--surface);border-radius:12px;margin-bottom:22px}.lunaPreview .previewVisual img{bottom:3%;width:85%;max-width:none}
.lunaPreview .option{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px 20px;width:100%;padding:22px;background:var(--surface);border-radius:12px}.lunaPreview .option>div{margin:0!important;float:none!important;width:auto!important;min-width:0}.lunaPreview .option .deskTopShape,.lunaPreview .option .deskTopSize{grid-column:1 / -1}.lunaPreview .option .deskTopColor{grid-column:span 9}.lunaPreview .option .legColor{grid-column:span 3}.lunaPreview .option .acc_arm,.lunaPreview .option .acc_holder{grid-column:span 6}
.lunaPreview .option strong{display:block;text-align:left;font-size:13px;line-height:1.5;font-weight:600;margin:0 0 9px}.lunaPreview .option ul{display:grid;gap:7px;list-style:none;margin:0;padding:0;width:100%}.lunaPreview .option .deskTopShape ul{grid-template-columns:repeat(6,minmax(0,1fr))}.lunaPreview .option .deskTopSize ul{grid-template-columns:repeat(4,minmax(0,1fr))}.lunaPreview .option .deskTopColor ul{grid-template-columns:repeat(8,minmax(0,1fr))}.lunaPreview .option .legColor ul{grid-template-columns:repeat(2,minmax(0,1fr))}.lunaPreview .option .acc_arm ul,.lunaPreview .option .acc_holder ul{grid-template-columns:repeat(3,minmax(0,1fr))}
.lunaPreview .option li{width:100%!important;height:34px;margin:0!important;float:none!important;text-align:center;border:1px solid var(--line);border-radius:5px;box-shadow:none!important;overflow:hidden;position:relative}.lunaPreview .option li:hover{border-color:var(--ink)}.lunaPreview .option li label{display:flex;align-items:center;justify-content:center;width:100%;height:100%;cursor:pointer}.lunaPreview .option li label span{font-size:12px!important;line-height:1.4!important;width:auto!important;height:auto!important;white-space:nowrap;padding:0 3px}.lunaPreview .option .deskTopColor li,.lunaPreview .option .legColor li{height:66px}.lunaPreview .option .deskTopColor label,.lunaPreview .option .legColor label{flex-direction:column}.lunaPreview .option .deskTopColor li label div,.lunaPreview .option .legColor li label div{width:100%!important;height:42px!important;display:block;flex:none}.lunaPreview .option .deskTopColor li label span,.lunaPreview .option .legColor li label span{flex:1;display:flex;align-items:center;justify-content:center;font-size:10px!important}
.desk-purchase{width:100%;display:grid;grid-template-columns:7fr 3fr;gap:10px;margin-top:20px}.desk-purchase a{display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:12px;border-radius:7px;text-decoration:none;font-size:14px;font-weight:500}.desk-buy-official{background:#1d1d1f;color:#fff}.desk-buy-naver{background:#03C75A;color:#fff}.desk-buy-naver img{width:13px;height:13px;filter:brightness(0) invert(1)}
@media(max-width:720px){.composer-heading{padding-top:30px}.composer-heading h1{font-size:30px}.composer-heading p{font-size:13px}.lunaPreview .option{padding:14px;gap:16px 12px}.lunaPreview .option .deskTopColor,.lunaPreview .option .legColor{grid-column:1 / -1}.lunaPreview .option .deskTopColor ul{grid-template-columns:repeat(4,minmax(0,1fr))}.lunaPreview .option .legColor ul{grid-template-columns:repeat(4,minmax(0,1fr))}.lunaPreview .option .deskTopShape ul{gap:4px}.lunaPreview .option li label span{font-size:10px!important}.lunaPreview .option .acc_arm,.lunaPreview .option .acc_holder{grid-column:1 / -1}.desk-purchase a{font-size:12px;padding:10px 6px}}

.composer-title-row{display:flex;align-items:center;justify-content:space-between;gap:24px}.composer-title-row h1{margin:0}.composer-title-row .desk-purchase{display:flex;align-items:center;width:auto;flex:none;gap:8px;margin:0}.composer-title-row .desk-purchase a{min-height:40px;padding:9px 22px;border-radius:999px;font-size:13px;white-space:nowrap}.composer-title-row .desk-buy-official{min-width:150px}.composer-title-row .desk-buy-naver{padding-inline:16px;min-width:110px}@media(max-width:720px){.composer-title-row{flex-wrap:wrap;gap:18px}.composer-title-row .desk-purchase a{min-height:38px;font-size:12px}.composer-title-row .desk-buy-official{min-width:140px}.composer-title-row .desk-buy-naver{min-width:100px}}
.composer-title-row .desk-purchase .desk-buy-official{min-width:160px;padding-inline:26px}
.composer-title-row .desk-purchase .desk-buy-naver{width:40px;min-width:40px;height:40px;padding:0;flex:none;gap:0}
@media(max-width:720px){.composer-title-row .desk-purchase .desk-buy-official{min-width:150px}.composer-title-row .desk-purchase .desk-buy-naver{width:38px;min-width:38px;height:38px}}
/* 본문 끝선까지 확장하되 합성 이미지 크기는 기존 860px 기준 유지 */
.lunaPreview{max-width:none;width:100%}
.lunaPreview .previewVisual{aspect-ratio:auto;height:min(570px,calc((100vw - clamp(48px,10vw,144px)) * .66279))}
.lunaPreview .previewVisual img{width:min(85%,731px);height:auto;max-width:none;left:50%;bottom:3%;transform:translateX(-50%)}
@media(max-width:720px){.lunaPreview .previewVisual{height:calc((100vw - 48px) * .66279)}}
/* 미리보기 배경과 옵션 사이 여백 제거, 합성 이미지 110% 확대 */
.lunaPreview .previewVisual{background:transparent;border-radius:0;margin-bottom:0;overflow:visible}
.lunaPreview .previewVisual img{width:min(93.5%,804.1px);height:auto}

/* 다크모드: 공식 스토어 버튼이 검정 배경에 묻히지 않도록 */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .desk-buy-official{background:#2c2c2e;color:#f5f5f7;border-color:#48484a}}
:root[data-theme="dark"] .desk-buy-official{background:#2c2c2e;color:#f5f5f7;border-color:#48484a}

/* 다크모드: 책상 제품 이미지(투명 PNG, 라이트 배경 기준)가 검정 배경에 묻히지 않도록 밝은 받침 */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .lunaPreview .previewVisual{background:#d6d6db;border-radius:14px;overflow:hidden}}
:root[data-theme="dark"] .lunaPreview .previewVisual{background:#d6d6db;border-radius:14px;overflow:hidden}

/* ── 옵션을 눌러도 화면이 위로 튀지 않게(미리보기 크기는 원래대로) ── */
/* 숨겨진 라디오가 페이지 위쪽에 있어서, 라벨을 누르면 브라우저가 그 입력칸으로 스크롤하던 문제 → 화면에 고정 */
.lunaPreview.lunaPreview>input[type="radio"]{position:fixed!important;top:0!important;left:0!important}
/* 옵션 버튼 다크모드(원본 css/original.css 의 흰색 고정값 보정) */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .lunaPreview .option li{background-color:#1c1c1e;border-color:#48484a}:root:not([data-theme="light"]) .lunaPreview .option li label span{color:#a1a1a6}:root:not([data-theme="light"]) .lunaPreview .option li:hover{border-color:#f5f5f7}}
:root[data-theme="dark"] .lunaPreview .option li{background-color:#1c1c1e;border-color:#48484a}
:root[data-theme="dark"] .lunaPreview .option li label span{color:#a1a1a6}
:root[data-theme="dark"] .lunaPreview .option li:hover{border-color:#f5f5f7}

/* 다크: 선택된 옵션을 밝게(선택=밝음, 미선택=어두움) */
@media(prefers-color-scheme:dark){
:root:not([data-theme="light"]) #basic:checked ~ .option .deskTopShape li:nth-child(1),
:root:not([data-theme="light"]) #black:checked ~ .option .deskTopColor li:nth-child(1),
:root:not([data-theme="light"]) #carbon:checked ~ .option .deskTopColor li:nth-child(4),
:root:not([data-theme="light"]) #curve:checked ~ .option .deskTopShape li:nth-child(2),
:root:not([data-theme="light"]) #dark:checked ~ .option .deskTopColor li:nth-child(7),
:root:not([data-theme="light"]) #drawer:checked ~ .option .deskTopShape li:nth-child(5),
:root:not([data-theme="light"]) #drawer:checked ~ .option .deskTopShape li:nth-child(6),
:root:not([data-theme="light"]) #holder_black:checked ~ .option .acc_holder li:nth-child(2),
:root:not([data-theme="light"]) #holder_none:checked ~ .option .acc_holder li:nth-child(1),
:root:not([data-theme="light"]) #holder_white:checked ~ .option .acc_holder li:nth-child(3),
:root:not([data-theme="light"]) #large:checked ~ .option .deskTopSize li:nth-child(3),
:root:not([data-theme="light"]) #left:checked ~ .option .deskTopShape li:nth-child(4),
:root:not([data-theme="light"]) #left:checked ~ .option .deskTopSize li:nth-child(4),
:root:not([data-theme="light"]) #legBlack:checked ~ .option .legColor li:nth-child(1),
:root:not([data-theme="light"]) #legWhite:checked ~ .option .legColor li:nth-child(2),
:root:not([data-theme="light"]) #light:checked ~ .option .deskTopColor li:nth-child(6),
:root:not([data-theme="light"]) #lpm:checked ~ .option .deskTopShape li:nth-child(3),
:root:not([data-theme="light"]) #middle:checked ~ .option .deskTopSize li:nth-child(2),
:root:not([data-theme="light"]) #monitorarm_black:checked ~ .option .acc_arm li:nth-child(2),
:root:not([data-theme="light"]) #monitorarm_none:checked ~ .option .acc_arm li:nth-child(1),
:root:not([data-theme="light"]) #monitorarm_white:checked ~ .option .acc_arm li:nth-child(3),
:root:not([data-theme="light"]) #pink:checked ~ .option .deskTopColor li:nth-child(3),
:root:not([data-theme="light"]) #right:checked ~ .option .deskTopShape li:nth-child(5),
:root:not([data-theme="light"]) #right:checked ~ .option .deskTopSize li:nth-child(4),
:root:not([data-theme="light"]) #small:checked ~ .option .deskTopSize li:nth-child(1),
:root:not([data-theme="light"]) #sprite:checked ~ .option .deskTopColor li:nth-child(5),
:root:not([data-theme="light"]) #walnut:checked ~ .option .deskTopColor li:nth-child(8),
:root:not([data-theme="light"]) #white:checked ~ .option .deskTopColor li:nth-child(2),
:root:not([data-theme="light"]) #xlarge:checked ~ .option .deskTopSize li:nth-child(4){background-color:#f5f5f7!important;color:#1d1d1f!important;border-color:#f5f5f7}
:root:not([data-theme="light"]) #basic:checked ~ .option .deskTopShape li:nth-child(1) label span,
:root:not([data-theme="light"]) #black:checked ~ .option .deskTopColor li:nth-child(1) label span,
:root:not([data-theme="light"]) #carbon:checked ~ .option .deskTopColor li:nth-child(4) label span,
:root:not([data-theme="light"]) #curve:checked ~ .option .deskTopShape li:nth-child(2) label span,
:root:not([data-theme="light"]) #dark:checked ~ .option .deskTopColor li:nth-child(7) label span,
:root:not([data-theme="light"]) #drawer:checked ~ .option .deskTopShape li:nth-child(5) label span,
:root:not([data-theme="light"]) #drawer:checked ~ .option .deskTopShape li:nth-child(6) label span,
:root:not([data-theme="light"]) #holder_black:checked ~ .option .acc_holder li:nth-child(2) label span,
:root:not([data-theme="light"]) #holder_none:checked ~ .option .acc_holder li:nth-child(1) label span,
:root:not([data-theme="light"]) #holder_white:checked ~ .option .acc_holder li:nth-child(3) label span,
:root:not([data-theme="light"]) #large:checked ~ .option .deskTopSize li:nth-child(3) label span,
:root:not([data-theme="light"]) #left:checked ~ .option .deskTopShape li:nth-child(4) label span,
:root:not([data-theme="light"]) #left:checked ~ .option .deskTopSize li:nth-child(4) label span,
:root:not([data-theme="light"]) #legBlack:checked ~ .option .legColor li:nth-child(1) label span,
:root:not([data-theme="light"]) #legWhite:checked ~ .option .legColor li:nth-child(2) label span,
:root:not([data-theme="light"]) #light:checked ~ .option .deskTopColor li:nth-child(6) label span,
:root:not([data-theme="light"]) #lpm:checked ~ .option .deskTopShape li:nth-child(3) label span,
:root:not([data-theme="light"]) #middle:checked ~ .option .deskTopSize li:nth-child(2) label span,
:root:not([data-theme="light"]) #monitorarm_black:checked ~ .option .acc_arm li:nth-child(2) label span,
:root:not([data-theme="light"]) #monitorarm_none:checked ~ .option .acc_arm li:nth-child(1) label span,
:root:not([data-theme="light"]) #monitorarm_white:checked ~ .option .acc_arm li:nth-child(3) label span,
:root:not([data-theme="light"]) #pink:checked ~ .option .deskTopColor li:nth-child(3) label span,
:root:not([data-theme="light"]) #right:checked ~ .option .deskTopShape li:nth-child(5) label span,
:root:not([data-theme="light"]) #right:checked ~ .option .deskTopSize li:nth-child(4) label span,
:root:not([data-theme="light"]) #small:checked ~ .option .deskTopSize li:nth-child(1) label span,
:root:not([data-theme="light"]) #sprite:checked ~ .option .deskTopColor li:nth-child(5) label span,
:root:not([data-theme="light"]) #walnut:checked ~ .option .deskTopColor li:nth-child(8) label span,
:root:not([data-theme="light"]) #white:checked ~ .option .deskTopColor li:nth-child(2) label span,
:root:not([data-theme="light"]) #xlarge:checked ~ .option .deskTopSize li:nth-child(4) label span{color:#1d1d1f!important}
}
:root[data-theme="dark"] #basic:checked ~ .option .deskTopShape li:nth-child(1),
:root[data-theme="dark"] #black:checked ~ .option .deskTopColor li:nth-child(1),
:root[data-theme="dark"] #carbon:checked ~ .option .deskTopColor li:nth-child(4),
:root[data-theme="dark"] #curve:checked ~ .option .deskTopShape li:nth-child(2),
:root[data-theme="dark"] #dark:checked ~ .option .deskTopColor li:nth-child(7),
:root[data-theme="dark"] #drawer:checked ~ .option .deskTopShape li:nth-child(5),
:root[data-theme="dark"] #drawer:checked ~ .option .deskTopShape li:nth-child(6),
:root[data-theme="dark"] #holder_black:checked ~ .option .acc_holder li:nth-child(2),
:root[data-theme="dark"] #holder_none:checked ~ .option .acc_holder li:nth-child(1),
:root[data-theme="dark"] #holder_white:checked ~ .option .acc_holder li:nth-child(3),
:root[data-theme="dark"] #large:checked ~ .option .deskTopSize li:nth-child(3),
:root[data-theme="dark"] #left:checked ~ .option .deskTopShape li:nth-child(4),
:root[data-theme="dark"] #left:checked ~ .option .deskTopSize li:nth-child(4),
:root[data-theme="dark"] #legBlack:checked ~ .option .legColor li:nth-child(1),
:root[data-theme="dark"] #legWhite:checked ~ .option .legColor li:nth-child(2),
:root[data-theme="dark"] #light:checked ~ .option .deskTopColor li:nth-child(6),
:root[data-theme="dark"] #lpm:checked ~ .option .deskTopShape li:nth-child(3),
:root[data-theme="dark"] #middle:checked ~ .option .deskTopSize li:nth-child(2),
:root[data-theme="dark"] #monitorarm_black:checked ~ .option .acc_arm li:nth-child(2),
:root[data-theme="dark"] #monitorarm_none:checked ~ .option .acc_arm li:nth-child(1),
:root[data-theme="dark"] #monitorarm_white:checked ~ .option .acc_arm li:nth-child(3),
:root[data-theme="dark"] #pink:checked ~ .option .deskTopColor li:nth-child(3),
:root[data-theme="dark"] #right:checked ~ .option .deskTopShape li:nth-child(5),
:root[data-theme="dark"] #right:checked ~ .option .deskTopSize li:nth-child(4),
:root[data-theme="dark"] #small:checked ~ .option .deskTopSize li:nth-child(1),
:root[data-theme="dark"] #sprite:checked ~ .option .deskTopColor li:nth-child(5),
:root[data-theme="dark"] #walnut:checked ~ .option .deskTopColor li:nth-child(8),
:root[data-theme="dark"] #white:checked ~ .option .deskTopColor li:nth-child(2),
:root[data-theme="dark"] #xlarge:checked ~ .option .deskTopSize li:nth-child(4){background-color:#f5f5f7!important;color:#1d1d1f!important;border-color:#f5f5f7}
:root[data-theme="dark"] #basic:checked ~ .option .deskTopShape li:nth-child(1) label span,
:root[data-theme="dark"] #black:checked ~ .option .deskTopColor li:nth-child(1) label span,
:root[data-theme="dark"] #carbon:checked ~ .option .deskTopColor li:nth-child(4) label span,
:root[data-theme="dark"] #curve:checked ~ .option .deskTopShape li:nth-child(2) label span,
:root[data-theme="dark"] #dark:checked ~ .option .deskTopColor li:nth-child(7) label span,
:root[data-theme="dark"] #drawer:checked ~ .option .deskTopShape li:nth-child(5) label span,
:root[data-theme="dark"] #drawer:checked ~ .option .deskTopShape li:nth-child(6) label span,
:root[data-theme="dark"] #holder_black:checked ~ .option .acc_holder li:nth-child(2) label span,
:root[data-theme="dark"] #holder_none:checked ~ .option .acc_holder li:nth-child(1) label span,
:root[data-theme="dark"] #holder_white:checked ~ .option .acc_holder li:nth-child(3) label span,
:root[data-theme="dark"] #large:checked ~ .option .deskTopSize li:nth-child(3) label span,
:root[data-theme="dark"] #left:checked ~ .option .deskTopShape li:nth-child(4) label span,
:root[data-theme="dark"] #left:checked ~ .option .deskTopSize li:nth-child(4) label span,
:root[data-theme="dark"] #legBlack:checked ~ .option .legColor li:nth-child(1) label span,
:root[data-theme="dark"] #legWhite:checked ~ .option .legColor li:nth-child(2) label span,
:root[data-theme="dark"] #light:checked ~ .option .deskTopColor li:nth-child(6) label span,
:root[data-theme="dark"] #lpm:checked ~ .option .deskTopShape li:nth-child(3) label span,
:root[data-theme="dark"] #middle:checked ~ .option .deskTopSize li:nth-child(2) label span,
:root[data-theme="dark"] #monitorarm_black:checked ~ .option .acc_arm li:nth-child(2) label span,
:root[data-theme="dark"] #monitorarm_none:checked ~ .option .acc_arm li:nth-child(1) label span,
:root[data-theme="dark"] #monitorarm_white:checked ~ .option .acc_arm li:nth-child(3) label span,
:root[data-theme="dark"] #pink:checked ~ .option .deskTopColor li:nth-child(3) label span,
:root[data-theme="dark"] #right:checked ~ .option .deskTopShape li:nth-child(5) label span,
:root[data-theme="dark"] #right:checked ~ .option .deskTopSize li:nth-child(4) label span,
:root[data-theme="dark"] #small:checked ~ .option .deskTopSize li:nth-child(1) label span,
:root[data-theme="dark"] #sprite:checked ~ .option .deskTopColor li:nth-child(5) label span,
:root[data-theme="dark"] #walnut:checked ~ .option .deskTopColor li:nth-child(8) label span,
:root[data-theme="dark"] #white:checked ~ .option .deskTopColor li:nth-child(2) label span,
:root[data-theme="dark"] #xlarge:checked ~ .option .deskTopSize li:nth-child(4) label span{color:#1d1d1f!important}

/* 합성 이미지(원본 860x688)가 박스 위로 넘쳐 다크 받침에서 잘리던 문제 → 박스 높이를 이미지 높이에 맞춤(라이트/다크 동일) */
.lunaPreview .previewVisual{height:calc(min(.935*(100vw - clamp(48px,10vw,144px)),804.1px)*.85)}
@media(max-width:720px){.lunaPreview .previewVisual{height:calc(min(.935*(100vw - 48px),804.1px)*.85)}}