@charset "utf-8";
/* =========================================================
 * custom/3d_v3.css — 3D 미리보기(3d.php) 전용. 3d_v2.css 를 옮겨 와서 2026-10-14 화면 틀(3칸)을 얹었다.
 *  - 3d_old.php 는 3d_v2.css 를 그대로 쓴다
 *  - 사이트 톤: 파랑 #2e78d3 / 글자 #1f2b38 / 보조 #55606c / 테두리 #e2e6eb (custom/style.css 와 같은 값)
 *  - 버튼·색칩 모양은 빌더(/custom/)의 .jr-pill / .jr-chip 과 맞춘다
 *  - 글자 15px 이상, 누르는 곳 44px 이상. 모든 규칙은 .j3n 안에서만
 * =======================================================*/
.j3n{color:#1f2b38;}
.j3n *{box-sizing:border-box;}
.j3n button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.j3n button:focus-visible{outline:2px solid #2e78d3;outline-offset:2px;}
.j3n button:disabled{cursor:not-allowed;opacity:.4;text-decoration:line-through;}
.j3n [hidden]{display:none !important;}


/* ---------- 미리보기 ---------- */
.j3n #j3-stage{
	position:relative;width:100%;height:640px;
	background:#e9e9e9;border:1px solid #e2e6eb;border-radius:14px;overflow:hidden;
}
.j3n #j3-stage canvas{display:block;position:absolute;inset:0;width:100%;height:100%;}
.j3n .model-tag{position:absolute;left:18px;top:16px;pointer-events:none;}
.j3n .model-tag strong{display:block;font-size:18px;font-weight:600;color:#1f2b38;}
.j3n .model-tag span{display:block;font-size:14px;margin-top:4px;color:#55606c;}
.j3n #j3-loading{
	position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);
	padding:14px 20px;background:#fff;border:1px solid #e2e6eb;border-radius:10px;
	font-size:15px;color:#3a4653;max-width:80%;
}
.j3n #j3-loading[data-state=ready]{display:none;}
.j3n #j3-loading[data-state=error]{color:#b3261e;border-color:#f1c9b6;}
.j3n .view-tools{position:absolute;right:14px;bottom:14px;display:flex;gap:6px;}
.j3n .view-tools button{
	min-height:44px;padding:9px 14px;border:1.5px solid #dfe3e8;border-radius:9px;
	background:rgba(255,255,255,.92);font-size:15px;color:#1f2b38;
}
.j3n .view-tools button:hover{border-color:#b9c7d8;}
.j3n .view-tools button.active{background:#2e78d3;border-color:#2e78d3;color:#fff;font-weight:600;}
.j3n .gesture{position:absolute;left:18px;bottom:16px;max-width:calc(100% - 470px);font-size:13px;line-height:1.5;color:#6e6e6e;pointer-events:none;word-break:keep-all;}

/* ---------- 선택 영역 ---------- */
.j3n .option{
	background:#fff;border:1px solid #e2e6eb;border-radius:14px;padding:18px 18px 16px;margin-bottom:14px;
}
.j3n .option h3{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:18px;font-weight:600;color:#1f2b38;}
.j3n .option h3 b{
	display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
	background:#2e78d3;color:#fff;font-size:13px;font-weight:600;
}
.j3n .option h3 span{margin-left:auto;font-size:14px;font-weight:400;color:#6e6e6e;}
.j3n .subhead{display:flex;justify-content:space-between;align-items:baseline;margin:18px 0 10px;font-size:16px;font-weight:600;color:#3a4653;}
.j3n .subhead span{font-size:14px;font-weight:500;color:#2e78d3;}

.j3n .choices{display:flex;flex-wrap:wrap;gap:8px;}
.j3n .choices button,.j3n .segmented button{
	min-width:64px;min-height:44px;padding:9px 14px;
	border:1.5px solid #dfe3e8;border-radius:9px;background:#fafbfc;
	font-size:15px;color:#1f2b38;text-align:left;
}
.j3n .choices button:hover:not(:disabled){border-color:#b9c7d8;}
.j3n .choices button.active,.j3n .segmented button.active{
	border-color:#2e78d3;background:#eef5fd;box-shadow:inset 0 0 0 1px #2e78d3;color:#1a4f8f;font-weight:600;
}
.j3n .handles{display:grid;grid-template-columns:1fr 1fr;}
.j3n .handles small{display:block;margin-top:3px;font-size:13px;font-weight:400;color:#6e6e6e;}
.j3n .compact button{min-width:72px;text-align:center;}
.j3n .handles .hgrp{grid-column:1/-1;margin:6px 0 -2px;font-size:14px;font-weight:600;color:#55606c;}
.j3n .handles .hgrp:first-child{margin-top:0;}

.j3n .segmented{display:flex;gap:6px;margin-bottom:12px;}
.j3n .segmented button{flex:1;text-align:center;}

.j3n .colors{display:flex;flex-wrap:wrap;gap:10px;}
.j3n .swatch{
	position:relative;width:42px;height:42px;padding:0;border:0;border-radius:50%;
	box-shadow:0 0 0 1.5px #d5d9de,inset 0 0 0 2px #fff;
}
.j3n .swatch:hover{box-shadow:0 0 0 2px #9fb4cc,inset 0 0 0 2px #fff;}
.j3n .swatch.active{box-shadow:0 0 0 3px #2e78d3,inset 0 0 0 2px #fff;}

.j3n .hint{margin:12px 0 0;font-size:14px;line-height:1.6;color:#55606c;word-break:keep-all;}

/* 카드 접기 */
.j3n .option h3{cursor:pointer;margin:-18px -18px 14px;padding:16px 18px;border-radius:14px;-webkit-tap-highlight-color:transparent;}
.j3n .option h3:hover{background:#f7f9fb;}
.j3n .option h3:focus-visible{outline:2px solid #2e78d3;outline-offset:-2px;}
.j3n .option h3 .sel{margin-left:auto;min-width:0;text-align:right;font-size:14px;font-weight:500;color:#2e78d3;word-break:keep-all;}
.j3n .option h3 #j3-handleCount{display:none;}
.j3n .option h3 .chev{flex:0 0 auto;width:10px;height:10px;margin-left:6px;border:solid #8a94a0;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s;}
.j3n .option.is-closed h3{margin-bottom:-16px;}
.j3n .option.is-closed h3 .chev{transform:rotate(-45deg);}
.j3n .option.is-closed > :not(h3){display:none !important;}

/* 선택 가이드 (? 버튼 · 창) */
.j3n .j3-q{display:inline-grid;place-items:center;width:22px;height:22px;padding:0;border:1.5px solid #9fb6cf;border-radius:50%;background:#fff;color:#2e78d3;font-size:13px;font-weight:700;line-height:1;cursor:pointer;flex:0 0 auto;}
.j3n .j3-q:hover{border-color:#2e78d3;background:#eef5fd;}
.j3n .subhead em{font-style:normal;display:inline-flex;align-items:center;gap:8px;}
.j3n .j3-qlink{margin:10px 0 0;padding:0;border:0;background:none;color:#2e78d3;font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.j3n .j3-qlink::after{content:' ?';text-decoration:none;}
.j3n .lp-note .j3-qlink{margin:0;font-size:13px;}
html.j3-gd-lock{overflow:hidden;}
.j3-guide{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;font-family:inherit;word-break:keep-all;}
.j3-guide[hidden]{display:none;}
.j3-guide .gd-dim{position:absolute;inset:0;background:rgba(20,28,38,.45);}
.j3-guide .gd-win{position:relative;display:flex;flex-direction:column;width:min(680px,calc(100% - 32px));max-height:min(86vh,820px);background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden;color:#1f2b38;}
.j3-guide .gd-top{display:flex;align-items:center;gap:10px;padding:16px 14px 6px 20px;}
.j3-guide .gd-t{margin:0 0 6px;font-size:20px;font-weight:700;}
.j3-guide .gd-x{flex:0 0 auto;margin-left:auto;width:40px;height:40px;border:0;border-radius:50%;background:none;font-size:26px;line-height:1;color:#6e7884;cursor:pointer;}
.j3-guide .gd-x:hover{background:#f1f4f7;}
.j3-guide .gd-tabs{display:flex;flex:1;min-width:0;gap:2px;padding:4px;border-radius:12px;background:#eef1f4;overflow-x:auto;scrollbar-width:none;}
.j3-guide .gd-tabs button{flex:1 0 auto;min-height:40px;padding:8px 10px;border:0;border-radius:9px;background:none;font-weight:500;font-size:15px;color:#6e7884;cursor:pointer;}
.j3-guide .gd-tabs button:hover{color:#1f2b38;background:rgba(255,255,255,.5);}
.j3-guide .gd-tabs button.on{background:#fff;color:#1f2b38;font-weight:700;box-shadow:0 1px 3px rgba(20,28,38,.14);}
.j3-guide .gd-body{padding:18px 24px 28px;overflow-y:auto;font-size:15px;line-height:1.7;}
.j3-guide .gd-t{margin:0 0 6px;font-size:19px;font-weight:700;}
.j3-guide .gd-lead{margin:0 0 4px;font-size:16px;color:#1f2b38;}
.j3-guide h4{margin:22px 0 8px;font-size:16px;font-weight:700;}
.j3-guide p{margin:8px 0;}
.j3-guide ul{margin:6px 0;padding-left:20px;}.j3-guide li{margin:4px 0;list-style:disc;}
.j3-guide .gd-tbl{overflow-x:auto;margin:6px 0;}
.j3-guide table{width:100%;border-collapse:collapse;font-size:14px;}
.j3-guide th{padding:8px 10px;background:#f3f6f9;border-bottom:1px solid #dfe3e8;text-align:left;font-weight:600;white-space:nowrap;}
.j3-guide td{padding:9px 10px;border-bottom:1px solid #eef1f4;vertical-align:top;}
.j3-guide td:first-child{font-weight:600;white-space:nowrap;}
.j3-guide .gd-note{margin:12px 0;padding:11px 14px;border-left:3px solid #2e78d3;border-radius:6px;background:#eef5fd;font-size:14px;}
.j3-guide .gd-faq{margin-top:22px;padding-top:6px;border-top:1px solid #e2e6eb;}
.j3-guide details{border-bottom:1px solid #eef1f4;}
.j3-guide summary{padding:12px 0;font-weight:600;cursor:pointer;}
.j3-guide summary::before{content:'Q. ';color:#2e78d3;}
.j3-guide details p{margin:0 0 12px;color:#3a4653;font-size:14px;}
@media (max-width:760px){
 .j3-guide{align-items:flex-end;}
 .j3-guide .gd-win{width:100%;max-height:88vh;border-radius:16px 16px 0 0;}
 .j3-guide td:first-child{white-space:normal;min-width:84px;}
}

/* 어두운 배경 */
.j3n.dark #j3-stage{background:#1f2b38;border-color:#1f2b38;}
.j3n.dark .model-tag{background:rgba(31,43,56,.85);border-color:#2f3d4d;}
.j3n.dark .model-tag strong,.j3n.dark .model-tag .picked dd{color:#fff;}
.j3n.dark .model-tag .picked dt{color:#b9c7d8;}
.j3n.dark .model-tag .picked{border-left-color:#3a4a5c;}
.j3n.dark .model-tag span,.j3n.dark .gesture{color:#b9c7d8;}

/* =========================================================
 * 2026-10-14 화면 틀 — 의류 커스텀(/apparel/)처럼 화면 폭을 다 쓰는 3칸
 *  왼쪽: 로고 인쇄·자동 회전·어두운 배경·이미지 저장·추천 조합 / 가운데: 3D / 오른쪽: 고르기(칸 안 스크롤) + 아래 고정 줄
 *  가운데 3D 높이와 오른쪽 칸 높이는 3d_v3.js fitWide() 가 "칸이 시작하는 곳 ~ 화면 아래"로 맞춘다
 * =======================================================*/
/* 이 화면에서는 사이트 분류 메뉴줄을 감춘다 (의류 커스텀·사업자 카탈로그와 같은 방식, 헤더 파일은 그대로) */
.nav_bottomline{display:none !important;}
.top_wrap{height:auto !important;border-bottom:1px solid rgba(0,0,0,.1);}
.sub_container.j3-full{max-width:none;}
/* 채널톡: 이 화면에서는 띄우지 않는다 (오른쪽 아래 주문 단추를 가림, 사용자 요청 2026-10-14). 사이트 꼬리 파일은 그대로 */
html body #ch-plugin,html body #ch-plugin *{display:none !important;}

.j3w{max-width:1920px;margin:10px auto 0;padding:10px 24px 40px;}
.j3w-main{display:grid;grid-template-columns:248px minmax(0,1fr) 420px;grid-template-areas:"left stage right";column-gap:20px;row-gap:12px;align-items:start;}
.j3w-left{grid-area:left;position:-webkit-sticky;position:sticky;top:12px;display:flex;flex-direction:column;gap:12px;min-width:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;}
.j3w-left>*{flex:none;}
.j3w-stage{grid-area:stage;min-width:0;position:-webkit-sticky;position:sticky;top:12px;}
.j3w-name{display:flex;flex-direction:column;gap:2px;padding:0 4px 4px;min-width:0;}
.j3w-right{grid-area:right;position:-webkit-sticky;position:sticky;top:12px;display:flex;flex-direction:column;min-height:0;min-width:0;}

/* 이름 */
.j3w-name h3{margin:0;font-size:22px;font-weight:600;line-height:1.35;letter-spacing:-.03em;color:#1f2b38;}
.j3w-links{display:flex;flex-wrap:wrap;gap:4px 14px;}
.j3n .j3w-link{padding:0;border:0;background:none;font:inherit;font-size:14px;white-space:nowrap;color:#55606c;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.j3n .j3w-link:hover{color:#2a6fc4;}

/* 왼쪽 버튼 (의류 커스텀 .ap-addbtn 과 같은 모양) */
.j3w-tools{display:grid;gap:8px;}
.j3n .j3w-tool{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 14px;border:1px solid #e2e6eb;border-radius:10px;
	background:#fff;color:#1f2b38;text-align:left;font-size:15px;font-weight:600;transition:border-color .15s,background .15s,color .15s;}
.j3n .j3w-tool span{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.j3n .j3w-tool small{font-size:12px;font-weight:400;color:#55606c;margin-top:3px;}
.j3n .j3w-tool:hover{border-color:#2e78d3;color:#2a6fc4;}
/* 켜고 끄는 버튼: 오른쪽 작은 스위치 */
.j3n .j3w-tool.tog::after{content:"";flex:none;margin-left:auto;width:36px;height:20px;border-radius:10px;
	background:radial-gradient(circle at 10px 50%,#fff 7px,transparent 7.5px),#cfd6de;transition:background .15s;}
.j3n .j3w-tool.tog.on{border-color:#2e78d3;background:#eaf2fc;color:#1a4f8f;}
.j3n .j3w-tool.tog.on::after{background:radial-gradient(circle at 26px 50%,#fff 7px,transparent 7.5px),#2e78d3;}

/* 로고 인쇄 (왼쪽 칸, 좁아서 이름 위·조절 아래) */
.j3n .logo-panel{padding:14px;background:#fff;border:1px solid #e2e6eb;border-radius:12px;}
.j3n .lp-file{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 12px;}
.j3n .lp-pick{flex:1 1 auto;min-height:44px;padding:9px 12px;border:1.5px solid #2e78d3;border-radius:9px;background:#eef5fd;color:#1a4f8f;font-size:15px;font-weight:600;}
.j3n .lp-clear{min-height:44px;padding:6px 12px;border:1.5px solid #dfe3e8;border-radius:9px;background:#fff;font-size:14px;color:#3a4653;}
.j3n .lp-name{order:3;flex:1 0 100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:#55606c;}
.j3n .lp-row{display:block;margin:0 0 10px;font-size:14px;color:#1f2b38;}
.j3n .lp-lb{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px;color:#55606c;}
.j3n .lp-val{font-style:normal;font-size:13px;color:#2e78d3;font-weight:600;}
.j3n .lp-row input[type=range]{display:block;width:100%;margin:0;accent-color:#2e78d3;height:28px;}
.j3n .lp-col .segmented{margin:4px 0 0;}
.j3n .lp-col .segmented button{min-width:0;padding:8px 4px;font-size:14px;}
.j3n .lp-note{margin:4px 0 0;font-size:13px;line-height:1.6;color:#6e6e6e;word-break:keep-all;}

/* 추천 조합 (한 줄에 하나) */
.j3n .presets{display:grid;gap:8px;padding:14px;background:#fff;border:1px solid #e2e6eb;border-radius:12px;}
.j3n .presets>span{font-size:15px;font-weight:700;color:#1f2b38;}
.j3n .presets button{min-height:44px;padding:10px 12px;text-align:left;border:1.5px solid #dfe3e8;border-radius:9px;background:#fafbfc;font-size:15px;font-weight:600;color:#1f2b38;}
.j3n .presets button:hover{border-color:#2e78d3;background:#eef5fd;color:#1a4f8f;}
.j3n .presets small{display:block;margin-top:3px;font-size:13px;font-weight:400;color:#6e6e6e;line-height:1.4;}
.j3w-tip{margin:0;padding:0 4px;font-size:13px;line-height:1.5;color:#6e6e6e;word-break:keep-all;}

/* 가운데 3D: 왼쪽 위 이름표 = 손잡이 이름 + 고른 옵션 (2026-10-14 오른쪽 아래에서 옮김) */
.j3n .model-tag{display:flex;flex-direction:column;gap:6px;max-width:calc(100% - 36px);padding:10px 14px;background:rgba(255,255,255,.92);border:1px solid #e2e6eb;border-radius:10px;}
.j3n .model-tag strong{font-size:16px;}
.j3n .tag-picked{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;margin:0;font-size:14px;line-height:1.5;}
.j3n .tag-picked dt{color:#6e6e6e;font-weight:400;white-space:nowrap;}
.j3n .tag-picked dd{margin:0;min-width:0;color:#1f2b38;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.j3n.dark .tag-picked dt{color:#b9c7d8;}.j3n.dark .tag-picked dd{color:#fff;}
/* 손잡이: 롱핸들·숏핸들 탭 + 썸네일 버튼 */
.j3n .hline{margin:0 0 12px;}
.j3n .handles button{display:flex;flex-direction:column;gap:2px;padding:8px 10px 10px;}
.j3n .handles .hthumb{display:block;width:100%;height:auto;aspect-ratio:880/120;margin:0 0 6px;border-radius:6px;background:#e6eaef;}
.j3n .handles .hname{font-size:15px;line-height:1.35;}
.j3n .handles small{margin-top:0;}
/* 그립·줄 카드는 접지 않는다 */
.j3n .option.is-fixed h3{cursor:default;}
.j3n .option.is-fixed h3:hover{background:none;}

/* 오른쪽: 위 칸 안 스크롤 */
.j3w-right-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 6px 12px 0;margin-right:-6px;scrollbar-gutter:stable;}
.j3w-right-scroll::-webkit-scrollbar{width:8px;}
.j3w-right-scroll::-webkit-scrollbar-thumb{background:#cfd6de;border-radius:4px;}
.j3n .option{margin-bottom:12px;}
.j3n .footnote{margin:4px 2px 0;font-size:13px;line-height:1.6;color:#6e6e6e;word-break:keep-all;}
.j3n .dot{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:-2px;margin:0 5px 0 2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);}

/* 오른쪽 아래 고정 줄: 고른 옵션 · 금액 · 수량 · 장바구니 · 바로 주문 (늘 보임) */
.j3w-foot{flex:none;display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:1px solid #e2e6eb;border-radius:14px;background:#fff;box-shadow:0 -8px 20px rgba(31,43,56,.06);}
.j3w-sum{padding:12px 14px;border-radius:10px;background:#f4f6f9;}
.j3w-unit{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:13px;color:#55606c;}
.j3w-unit em{font-style:normal;font-weight:600;color:#1f2b38;}
.j3w-unit:empty{display:none;}	/* 2026-10-29 부품값 줄 숨김 — 가격 문의 안내만 이 칸에 나온다 */
.j3w-qtyrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:14px;font-weight:600;}
.j3w-qty{display:inline-flex;align-items:center;border:1px solid #d5dbe2;border-radius:8px;background:#fff;overflow:hidden;}
.j3n .j3w-qty button{width:40px;height:38px;border:0;background:#fff;font-size:18px;color:#1f2b38;}
.j3n .j3w-qty button:hover{background:#f1f4f7;}
.j3n .j3w-qty input{width:52px;height:38px;border:0;border-left:1px solid #e2e6eb;border-right:1px solid #e2e6eb;text-align:center;font:inherit;font-size:15px;font-weight:600;color:#1f2b38;-moz-appearance:textfield;}
.j3n .j3w-qty input::-webkit-outer-spin-button,.j3n .j3w-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.j3w-total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid #cfd6de;font-size:15px;font-weight:600;}
.j3w-total small{font-size:12px;font-weight:400;color:#55606c;}
.j3w-total b{font-size:22px;color:#2a6fc4;font-variant-numeric:tabular-nums;}
.j3w-total.ask b{font-size:16px;color:#55606c;}
.j3w-actions{display:grid;grid-template-columns:auto 1fr 1.3fr;gap:8px;}
.j3n .j3w-btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 16px;border:1px solid #e2e6eb;border-radius:8px;background:#fff;font-size:16px;font-weight:600;color:#1f2b38;white-space:nowrap;}
.j3n .j3w-btn:hover{border-color:#b9c3ce;}
.j3n .j3w-btn.sm{padding:0 12px;font-size:14px;color:#55606c;}
.j3n .j3w-btn.pri{background:#2a6fc4;border-color:#2a6fc4;color:#fff;}
.j3n .j3w-btn.pri:hover{background:#225ca6;border-color:#225ca6;}
.j3w-msg{margin:0;font-size:13px;line-height:1.5;color:#55606c;word-break:keep-all;}
/* 관리자: 미리보기 안내 / 상품 수정 화면 탭 안 (머리·꼬리 없음) */
.j3w-admin-note{margin:6px 0 0;padding:8px 10px;border-radius:8px;background:#fff4e5;color:#8f5908;font-size:13px;line-height:1.5;word-break:keep-all;}
.j3w-admin-tip{margin:0;padding:10px 12px;border-radius:8px;background:#eaf2fc;color:#1a4f8f;font-size:14px;line-height:1.5;word-break:keep-all;}
body.j3-admin{margin:0;background:#fff;}
body.j3-admin .j3w{margin:0;padding:12px 12px 12px;}
.j3w-msg:empty{display:none;}

/* 좁은 화면 */
@media (max-width:1280px){
	.j3w{padding-left:16px;padding-right:16px;}
	.j3w-main{grid-template-columns:210px minmax(0,1fr) 360px;column-gap:16px;}
}
/* 높이가 낮은 화면(노트북): 고정 줄을 줄여 옵션 칸을 넓힌다 — 금액 풀이는 숨기고 수량·합계를 한 줄로 */
@media (min-width:961px) and (max-height:900px){
	.j3w-foot{gap:8px;padding:12px 14px;}
	.j3w-unit,.j3w-qtyrow>span{display:none;}
	.j3w-sum{display:flex;align-items:center;gap:10px;padding:8px 10px;}
	.j3w-qtyrow{margin:0;}
	.j3w-total{flex:1;min-width:0;margin:0;padding:0;border:0;justify-content:flex-end;}
	.j3w-total b{font-size:20px;}
	.j3n .j3w-btn{height:44px;}
}
@media (max-width:960px){
	.j3w{padding:0 12px 0;}
	.j3w-main{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"name" "stage" "tools" "logo" "presets" "tip" "right";row-gap:12px;}
	.j3w-stage{position:static;}
	.j3w-left{display:contents;}
	.j3w-name{grid-area:name;}.j3w-tools{grid-area:tools;}.j3n .logo-panel{grid-area:logo;}.j3n .presets{grid-area:presets;}.j3w-tip{grid-area:tip;}
	.j3w-tools{grid-template-columns:repeat(2,1fr);}
	.j3n .j3w-tool{min-height:48px;padding:8px 12px;font-size:14px;}
	.j3n .j3w-tool small{display:none;}
	.j3w-right{position:static;height:auto !important;}
	.j3w-right-scroll{overflow:visible;padding:0;margin-right:0;}
	/* 휴대폰: 합계·수량·버튼 줄을 화면 맨 아래에 늘 붙인다 (고른 옵션·금액 풀이는 숨김) */
	.j3w{padding-bottom:150px;}
	.j3w-foot{position:fixed;left:0;right:0;bottom:0;z-index:60;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-radius:14px 14px 0 0;border-bottom:0;box-shadow:0 -6px 20px rgba(31,43,56,.12);}
	.j3w-unit,.j3w-qtyrow>span,.j3w-total small{display:none;}
	.j3w-sum{display:flex;align-items:center;gap:10px;padding:8px 10px;}
	.j3w-qtyrow{margin:0;}
	.j3w-total{flex:1;min-width:0;margin:0;padding:0;border:0;justify-content:flex-end;}
	.j3w-total b{font-size:20px;}
	.j3n .j3w-btn{height:44px;font-size:15px;}
	.j3w-name h3{font-size:20px;}
	.j3n .model-tag{left:10px;top:10px;padding:6px 10px;}
	.j3n .model-tag strong{font-size:15px;}
	.j3n .tag-picked{font-size:12px;gap:0 8px;}
	.j3n .gesture{left:12px;right:12px;bottom:62px;max-width:none;font-size:12px;}
	.j3n .view-tools{left:10px;right:10px;bottom:10px;justify-content:flex-end;gap:4px;}
	.j3n .view-tools button{padding:8px 9px;font-size:14px;white-space:nowrap;}
}
@media (max-width:640px){
	.j3n .j3w-btn.sm{padding:0 10px;font-size:13px;}
}

@media (prefers-reduced-motion:reduce){.j3n *{transition:none !important;}}

/* ---------- 처음 온 손님 사용법 안내 (2026-10-14, 의류 커스텀 .ap-tour 와 같은 모양) — custom/3d_tour.js ----------
 * 화면은 옅게 흐리고 비춘 곳만 밝게, 작은 흰 말풍선(× · 파란 강조 한 줄 · 점 진행 · 검은 다음) */
.j3-tour{position:fixed;inset:0;z-index:10050;opacity:0;transition:opacity .25s ease;font-family:inherit;}
.j3-tour.on{opacity:1;}
.j3-tour-hole{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px rgba(17,24,39,.22);pointer-events:none;
	transition:left .45s cubic-bezier(.22,.8,.24,1),top .45s cubic-bezier(.22,.8,.24,1),width .45s cubic-bezier(.22,.8,.24,1),height .45s cubic-bezier(.22,.8,.24,1),border-radius .3s;}
.j3-tour-hole:after{content:'';position:absolute;inset:-3px;border:2px solid rgba(46,120,211,.55);border-radius:16px;animation:j3TourPulse 2s ease-out infinite;}
.j3-tour-hole.none{border-radius:50%;}
.j3-tour-hole.none:after{display:none;}
@keyframes j3TourPulse{0%{opacity:.9;transform:scale(1);}70%{opacity:0;transform:scale(1.03);}100%{opacity:0;transform:scale(1.03);}}
.j3-tour-card{position:fixed;box-sizing:border-box;padding:22px 22px 18px;border-radius:6px;background:#fff;color:#111;text-align:left;
	box-shadow:0 10px 34px rgba(17,24,39,.18),0 1px 3px rgba(17,24,39,.08);word-break:keep-all;outline:none;
	transition:left .45s cubic-bezier(.22,.8,.24,1),top .45s cubic-bezier(.22,.8,.24,1),opacity .18s,transform .18s;}
.j3-tour-card.swap{opacity:.2;transform:translateY(4px);}
.j3-tour-card:before{content:'';position:absolute;width:12px;height:12px;background:#fff;transform:rotate(45deg);}
.j3-tour-card.side-right:before{left:-6px;top:calc(var(--j3-tail,30px) - 6px);box-shadow:-2px 2px 3px rgba(17,24,39,.05);}
.j3-tour-card.side-left:before{right:-6px;top:calc(var(--j3-tail,30px) - 6px);box-shadow:2px -2px 3px rgba(17,24,39,.05);}
.j3-tour-card.side-bottom:before{top:-6px;left:calc(var(--j3-tail,30px) - 6px);}
.j3-tour-card.side-top:before{bottom:-6px;left:calc(var(--j3-tail,30px) - 6px);}
.j3-tour-card.center:before,.j3-tour-card.side-float:before{display:none;}
.j3-tour-x{position:absolute;top:14px;right:14px;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:none;color:#8a939c;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.j3-tour-x:hover{background:#f1f3f5;color:#111;}
.j3-tour-card h4{margin:0 34px 10px 0;font-size:17px;font-weight:700;letter-spacing:-0.02em;color:#111;}
.j3-tour-accent{margin:0 0 4px;font-size:14px;font-weight:600;color:#2e78d3;line-height:1.55;}
.j3-tour-accent:empty{display:none;}
.j3-tour-text{margin:0;font-size:14px;line-height:1.6;color:#222;}
.j3-tour-text b{font-weight:700;}
.j3-tour-btns{display:flex;align-items:center;gap:6px;margin-top:22px;}
.j3-tour-sp{flex:1;}
.j3-tour-dots{display:flex;gap:5px;}
.j3-tour-dots i{width:6px;height:6px;border-radius:3px;background:#d4d8dd;cursor:pointer;transition:width .25s,background .25s;}
.j3-tour-dots i.done{background:#a9c6ea;}
.j3-tour-dots i.on{width:14px;background:#2e78d3;}
.j3-tour-prev{height:34px;padding:0 10px;border:0;background:none;color:#6b7480;font:inherit;font-size:14px;cursor:pointer;}
.j3-tour-prev:hover{color:#111;}
.j3-tour-next{height:34px;padding:0 16px;border:0;border-radius:4px;background:#111;color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s;}
.j3-tour-next:hover{background:#2b2f34;}
.j3-tour-next:focus-visible,.j3-tour-prev:focus-visible,.j3-tour-x:focus-visible{outline:2px solid #2e78d3;outline-offset:2px;}
html.j3-touring{overflow-anchor:none;}
@media (prefers-reduced-motion:reduce){
	.j3-tour,.j3-tour-hole,.j3-tour-card,.j3-tour-dots i{transition:none;}
	.j3-tour-hole:after{animation:none;}
}