:root{
  --ink:#17251c;--forest:#1e3c2d;--forest-2:#2e5740;--moss:#63775f;--cream:#f6f2e9;
  --paper:#fffdf8;--line:rgba(35,61,45,.14);--muted:#667068;--white:#fff;
  --shadow:0 24px 70px rgba(20,42,29,.12);--serif:"Noto Serif KR","Nanum Myeongjo","AppleMyungjo",Georgia,serif;
  --sans:"Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);line-height:1.55;word-break:keep-all}body.nav-open{overflow:hidden}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button,input{font:inherit}.container{width:min(1440px,calc(100% - 36px));margin:0 auto}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.skip-link{position:absolute;top:-100px;left:16px;z-index:999;background:#fff;padding:12px 16px;border-radius:12px}.skip-link:focus{top:16px}
.site-header{position:sticky;z-index:100;top:0;background:rgba(246,242,233,.94);backdrop-filter:blur(18px);color:var(--ink);border-bottom:1px solid var(--line)}.header-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:26px}.logo{display:flex;align-items:center;gap:13px}.logo-mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid currentColor;border-radius:50%;font-family:var(--serif);font-size:1.3rem}.logo-type{display:grid;font-family:var(--serif);font-weight:700;letter-spacing:.06em;font-size:1.05rem}.logo-type small{font-family:var(--sans);font-size:.54rem;letter-spacing:.17em;font-weight:600;opacity:.72}.designer-nav{display:flex;align-items:center;gap:22px;margin-left:auto;font-size:.88rem;font-weight:700}.header-cta{display:inline-flex;gap:10px;align-items:center;border:1px solid currentColor;padding:9px 16px;border-radius:999px;font-size:.86rem;font-weight:700}.menu-toggle{display:none;width:44px;height:44px;background:none;border:0;padding:10px;flex-direction:column;justify-content:center;gap:5px;color:inherit}.menu-toggle span{display:block;height:2px;background:currentColor;width:100%}.mobile-menu{display:none;position:fixed;top:76px;left:0;right:0;background:var(--cream);color:var(--ink);padding:18px 20px 30px;border-top:1px solid var(--line);box-shadow:var(--shadow)}.mobile-menu.open{display:grid}.mobile-menu a{padding:14px 4px;border-bottom:1px solid var(--line);font-size:1rem;font-weight:700}
.designer-intro{padding:48px 0 24px}.intro-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}.eyebrow{margin:0 0 10px;color:var(--moss);font-size:.72rem;font-weight:800;letter-spacing:.2em}.designer-intro h1{font-family:var(--serif);font-size:clamp(2.2rem,4.6vw,4.6rem);line-height:1.12;letter-spacing:-.045em;margin:0}.designer-intro h1 em{font-style:normal;color:var(--forest-2)}.intro-copy{max-width:540px;color:var(--muted);margin:0}.intro-note{display:inline-flex;align-items:center;gap:8px;background:#e8eee7;color:var(--forest);padding:8px 12px;border-radius:999px;font-size:.8rem;font-weight:750;margin-bottom:12px}.intro-note:before{content:"";width:7px;height:7px;border-radius:50%;background:#62855f}
.designer-layout{display:grid;grid-template-columns:300px minmax(0,1fr) 300px;gap:16px;padding-bottom:36px;align-items:start}.panel{background:rgba(255,253,248,.96);border:1px solid var(--line);border-radius:22px;box-shadow:0 15px 45px rgba(26,45,32,.07);overflow:hidden}.panel-section{padding:20px;border-bottom:1px solid var(--line)}.panel-section:last-child{border-bottom:0}.panel-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.panel-title h2{font-family:var(--serif);font-size:1.2rem;margin:0}.panel-title small{color:var(--muted);font-size:.72rem}.space-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field label{display:block;color:var(--muted);font-size:.73rem;margin-bottom:5px}.input-unit{position:relative}.input-unit input{width:100%;height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:0 42px 0 12px;color:var(--ink);font-weight:700}.input-unit span{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-size:.68rem;color:var(--muted)}.apply-size{width:100%;height:43px;border:0;border-radius:12px;background:var(--forest);color:#fff;font-weight:750;margin-top:10px;cursor:pointer}.helper{color:var(--muted);font-size:.72rem;margin:9px 0 0}.background-list{display:grid;grid-template-columns:1fr 1fr;gap:9px}.background-choice{border:1px solid var(--line);padding:4px;border-radius:13px;background:#fff;cursor:pointer;color:var(--ink)}.background-choice img{width:100%;aspect-ratio:1.55;object-fit:cover;border-radius:9px}.background-choice span{display:block;padding:6px 2px 4px;font-size:.72rem;font-weight:750}.background-choice.is-active{outline:2px solid var(--forest);outline-offset:1px;background:#edf2ec}.product-list{display:grid;gap:9px;max-height:510px;overflow:auto;padding-right:3px}.product-card{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}.product-add{width:100%;border:0;background:transparent;display:grid;grid-template-columns:74px 1fr 25px;align-items:center;gap:10px;text-align:left;padding:8px;cursor:pointer;color:var(--ink)}.product-add:hover{background:#f1f4ef}.product-thumb{height:58px;background:#e9e8e1;border-radius:9px;display:grid;place-items:center;overflow:hidden}.product-thumb img{width:94%;max-height:94%;object-fit:contain}.product-copy{min-width:0}.product-copy strong,.product-copy small,.product-copy em{display:block}.product-copy strong{font-family:var(--serif);font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-copy small{font-size:.7rem;color:var(--moss);font-weight:750}.product-copy em{font-style:normal;font-size:.62rem;color:var(--muted);margin-top:2px}.product-plus{font-size:1.2rem;color:var(--forest)}
.workspace-panel{min-width:0;background:#dedbd3;border-radius:24px;border:1px solid rgba(35,61,45,.12);overflow:hidden;box-shadow:var(--shadow)}.workspace-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 15px;background:rgba(255,253,248,.96);border-bottom:1px solid var(--line)}.workspace-status{display:flex;gap:17px;align-items:center;flex-wrap:wrap;font-size:.75rem}.workspace-status strong{font-size:.85rem}.workspace-status span{color:var(--muted)}.toolbar-actions{display:flex;gap:7px}.tool-button{height:38px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--forest);padding:0 12px;font-weight:750;font-size:.75rem;cursor:pointer}.tool-button.primary{background:var(--forest);color:#fff}.tool-button.danger{color:#963c34}.tool-button:disabled{opacity:.38;cursor:not-allowed}.board-shell{position:relative;min-height:620px;display:grid;place-items:center;padding:14px;overflow:auto;background:linear-gradient(45deg,rgba(255,255,255,.22) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.22) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.22) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.22) 75%);background-size:28px 28px;background-position:0 0,0 14px,14px -14px,-14px 0}.design-board{position:relative;flex:none;background-size:cover;background-position:center;box-shadow:0 18px 45px rgba(17,34,23,.22);border:1px solid rgba(255,255,255,.58);overflow:hidden;touch-action:none}.design-board:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:10% 10%}.empty-state{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:min(320px,80%);padding:22px;text-align:center;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border-radius:18px;box-shadow:0 12px 35px rgba(20,38,27,.13);pointer-events:none}.empty-state strong{display:block;font-family:var(--serif);font-size:1.25rem}.empty-state span{display:block;color:var(--muted);font-size:.8rem;margin-top:5px}.placed-item{position:absolute;border:0;padding:0;background:transparent;cursor:grab;touch-action:none;transform-origin:center;overflow:visible}.placed-item:active,.placed-item.is-dragging{cursor:grabbing}.placed-item img{position:absolute;width:100%;height:auto;max-width:none;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;user-select:none;filter:drop-shadow(0 4px 5px rgba(0,0,0,.16))}.selection-ring{position:absolute;inset:-5px;border:2px solid transparent;border-radius:5px;pointer-events:none}.placed-item.is-selected .selection-ring{border-color:#fff;box-shadow:0 0 0 2px var(--forest),0 4px 13px rgba(0,0,0,.25)}
.selection-card{padding:15px;border-radius:14px;background:#edf1eb}.selection-card strong{display:block;font-family:var(--serif);font-size:.98rem}.selection-card p{margin:4px 0 0;font-size:.73rem;color:var(--muted)}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.control-grid button{height:41px;border-radius:11px;border:1px solid var(--line);background:#fff;color:var(--forest);font-weight:750;font-size:.75rem;cursor:pointer}.control-grid button:last-child{color:#9c3e36}.control-grid button:disabled{opacity:.38}.summary-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.summary-head strong{font-family:var(--serif)}.summary-head b{display:grid;place-items:center;min-width:28px;height:28px;padding:0 7px;border-radius:999px;background:var(--forest);color:#fff;font-size:.72rem}.summary-list{display:grid;gap:0}.summary-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.78rem}.summary-row span{font-weight:750}.summary-row small{display:block;color:var(--muted);font-weight:500}.summary-row strong{white-space:nowrap}.summary-empty{color:var(--muted);font-size:.78rem;margin:0}.notice-box{background:#f0ebe1;border-radius:14px;padding:13px;color:#5b665d;font-size:.72rem;margin-top:13px}.save-stack{display:grid;gap:8px}.save-stack button{height:43px;border-radius:12px;border:1px solid var(--forest);background:#fff;color:var(--forest);font-weight:750;cursor:pointer}.save-stack button.primary{background:var(--forest);color:#fff}.keyboard-guide{font-size:.67rem;color:var(--muted);margin:10px 0 0}.mobile-controls{display:none;position:fixed;z-index:90;left:10px;right:10px;bottom:10px;padding:8px;border-radius:16px;background:rgba(255,253,248,.95);backdrop-filter:blur(14px);box-shadow:0 10px 35px rgba(15,32,21,.2);grid-template-columns:repeat(5,1fr);gap:5px}.mobile-controls button{border:0;background:#edf1eb;color:var(--forest);border-radius:10px;min-height:47px;font-size:.68rem;font-weight:800}.mobile-controls button:last-child{background:var(--forest);color:#fff}.mobile-controls button:disabled{opacity:.4}.toast{position:fixed;z-index:300;left:50%;bottom:22px;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:#17251c;color:#fff;border-radius:999px;padding:11px 17px;font-size:.8rem;transition:.25s}.toast.is-visible{opacity:1;transform:translate(-50%,0)}
.designer-footer{padding:28px 0 38px;color:var(--muted);font-size:.72rem}.designer-footer .container{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:22px}
@media(max-width:1180px){.designer-layout{grid-template-columns:270px minmax(0,1fr)}.right-panel{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}.right-panel .panel-section{border-bottom:0;border-right:1px solid var(--line)}.right-panel .panel-section:last-child{border-right:0}.board-shell{min-height:560px}}
@media(max-width:820px){.container{width:min(100% - 20px,1440px)}.designer-nav,.header-cta{display:none}.menu-toggle{display:flex}.designer-intro{padding:32px 0 18px}.intro-inner{display:block}.intro-copy{margin-top:16px}.designer-layout{display:flex;flex-direction:column;gap:12px;padding-bottom:88px}.left-panel,.workspace-panel,.right-panel{width:100%}.left-panel{display:flex;flex-direction:column}.left-panel .panel-section:nth-child(3){order:3}.product-list{display:flex;overflow-x:auto;overflow-y:hidden;max-height:none;padding:1px 1px 8px}.product-card{min-width:240px}.product-add{grid-template-columns:72px 1fr 24px}.board-shell{min-height:440px;padding:8px}.workspace-toolbar{padding:10px}.toolbar-actions{display:none}.right-panel{display:block}.right-panel .panel-section{border-right:0;border-bottom:1px solid var(--line)}.right-panel .panel-section:last-child{border-bottom:0}.mobile-controls{display:grid}.toast{bottom:78px}.designer-footer{padding-bottom:100px}.designer-footer .container{display:block}.designer-footer p{margin:5px 0}}
@media(max-width:520px){.header-inner{height:68px}.logo-type small{display:none}.mobile-menu{top:68px}.designer-intro h1{font-size:2.35rem}.panel-section{padding:16px}.background-list{grid-template-columns:1fr 1fr}.workspace-status span:last-child{display:none}.board-shell{min-height:390px}.right-panel .panel-section:first-child{display:none}}

/* Drag-and-drop interaction fixes */
.product-add[draggable="true"]{cursor:grab}.product-add.is-dragging-product{opacity:.55;cursor:grabbing}.design-board.is-drop-target{outline:3px solid rgba(35,85,57,.82);outline-offset:3px}.placed-item{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.placed-item img{-webkit-user-drag:none}

.sim-guide{position:absolute;right:14px;bottom:14px;z-index:7;display:flex;align-items:flex-end;gap:9px;pointer-events:none;transition:opacity .22s ease,transform .22s ease,visibility .22s ease}
.sim-guide.has-items{opacity:0;visibility:hidden;transform:translateY(10px)}
.sim-guide-bubble{max-width:235px;padding:11px 13px;border-radius:18px 18px 6px 18px;background:rgba(255,253,248,.94);border:1px solid rgba(35,61,45,.12);box-shadow:0 18px 40px rgba(20,42,29,.12);backdrop-filter:blur(8px)}
.sim-guide-bubble strong{display:block;font-family:var(--serif);font-size:.9rem;line-height:1.2;margin-bottom:6px;color:var(--forest)}
.sim-guide-bubble p{margin:0;font-size:.7rem;line-height:1.5;color:var(--muted)}
.sim-guide-figure{width:100px;flex:none}
.sim-guide-figure img{width:100%;height:auto;filter:drop-shadow(0 12px 28px rgba(18,36,25,.18))}
@media(max-width:820px){.board-shell{position:relative}.sim-guide{right:10px;bottom:10px;gap:8px}.sim-guide-bubble{max-width:190px;padding:10px 12px;border-radius:16px 16px 6px 16px}.sim-guide-bubble strong{font-size:.86rem;margin-bottom:4px}.sim-guide-bubble p{font-size:.68rem;line-height:1.45}.sim-guide-figure{width:86px}}
@media(max-width:520px){.sim-guide{align-items:center}.sim-guide-bubble{max-width:160px;padding:9px 10px}.sim-guide-bubble p{font-size:.64rem}}