.design-layout{grid-template-columns:160px minmax(0,1fr) 340px;gap:20px}.design-editor{padding:32px}.card-kicker{font-size:11px;letter-spacing:2px;color:#9a7d50}.design-editor h2{font-size:26px;margin:12px 0 22px}.design-details{border-top:1px solid #e6ddcf;margin:22px 0;padding:16px 0}.design-details summary{font-size:13px;color:#806645;cursor:pointer;line-height:1.8}.my-product-card{text-align:center;background:#faf5ea;border:1px solid #e6d7bc;border-radius:20px;padding:24px 18px;color:#53340a;overflow:hidden}.my-product-card h3{font-size:24px;margin:12px 0;overflow-wrap:anywhere}.bowl-visual svg{width:100%;max-width:310px;margin:16px auto 0;display:block}.bowl-visual p{font-size:11px;line-height:1.7}.bowl-fill{transition:width .15s ease}.bowl-visual.over{border-bottom:3px solid #bd422f}.bowl-visual.near{border-bottom:3px solid #c49727}.package-visual{display:block;width:150px;height:160px;margin:12px auto}.product-materials{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}.product-materials span{font-size:11px;background:#fff9ef;border:1px solid #e1d6c3;border-radius:18px;padding:5px 9px}.grain-icon{width:70px;height:50px;display:block}.base-filters .grain-icon{width:30px;height:23px;display:inline-block;vertical-align:middle;margin-right:3px}.ingredient-swatch{display:flex;align-items:center;gap:8px;margin-bottom:10px}.ingredient-swatch svg{width:40px;height:40px;flex:none}.ingredient-swatch small{font-size:10px;color:#7e735e}.dose-presets{display:flex;gap:8px;margin-top:12px}.dose-presets button{background:#fff9ed;border:1px solid #d7c5a7;color:#654922;border-radius:20px;padding:8px 18px;cursor:pointer}.design-editor input[type=range]{padding:0;height:30px;accent-color:#8a6a32;cursor:pointer}.design-editor output{font-size:17px;font-weight:700;color:#745521}.quick-start{margin-top:32px}.quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.quick-grid button{display:flex;flex-direction:column;gap:10px;padding:17px 12px;text-align:left;border:1px solid #ded1b9;border-radius:16px;background:#fffaf0;color:#5b4020;cursor:pointer}.quick-grid button:hover{border-color:#927037;transform:translateY(-2px)}.quick-grid small{font-size:10px}.quick-grid .ingredient-swatch small{display:none}.quick-grid strong{font-size:14px}.coating-row{animation:ingredient-arrive .2s ease}.design-preview .violation{font-size:12px}.design-preview .price-note{margin-bottom:0}.design-route .design-next{position:sticky;bottom:0;background:inherit;padding:14px 0;z-index:2}.design-route .design-details[open]{padding-bottom:4px}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #bc9b58;outline-offset:3px}
@keyframes ingredient-arrive{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.studio-dark .my-product-card,.studio-dark .quick-grid button,.studio-dark .selected-material,.studio-dark .coating-row{background:#332d23;color:#f4e8d1;border-color:#6c5a3e}.studio-dark .design-details summary,.studio-dark output,.studio-dark .card-kicker{color:#dfc393}.studio-dark .product-materials span,.studio-dark .dose-presets button{background:#493c2a;color:#f4e8d1;border-color:#88714c}.studio-dark .my-product-card .hint{color:#cfbfa4}
@media(max-width:1100px){.design-layout{grid-template-columns:minmax(0,1fr) 300px}.design-steps{grid-column:1/-1;position:static;flex-direction:row}.design-steps button{flex:1;text-align:center;padding:13px 8px}}
@media(max-width:700px){.design-layout{display:block}.design-route #main{padding:14px}.design-editor{padding:22px 18px}.design-steps{display:flex;overflow-x:auto;margin-bottom:16px;gap:5px}.design-steps button{font-size:11px;white-space:nowrap;min-width:62px}.design-preview{display:none}.design-editor h2{font-size:23px}.quick-grid{grid-template-columns:1fr}.quick-grid button{display:grid;grid-template-columns:40px 1fr;align-items:center;padding:14px}.quick-grid button small{grid-column:2}.quick-grid .ingredient-swatch{grid-row:1/3;margin:0}.my-product-card{padding:18px 12px}.design-route .design-next{bottom:52px}.dose-presets button{padding:8px 16px}.base-filters button{padding:8px 10px}}
.dose-controls{display:grid;grid-template-columns:minmax(0,1fr) 132px;align-items:end;gap:16px}.dose-controls label{min-width:0}.dose-controls .dose-number input{width:100%;min-width:0;box-sizing:border-box}.dose-number{font-size:13px;letter-spacing:0}@media(max-width:420px){.dose-controls{grid-template-columns:minmax(0,1fr) 106px;gap:10px}}
@media(prefers-reduced-motion:reduce){.coating-row,.bowl-fill,.quick-grid button{animation:none;transition:none}.quick-grid button:hover{transform:none}html{scroll-behavior:auto}}

.recommendations{margin:24px 0;padding:22px;border:1px solid #d8c7a4;border-radius:16px;background:#fbf8ef}.recommendations h3{margin-top:0}.recommendation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}.recommendation-card{display:flex;flex-direction:column;min-width:0;padding:18px;border:1px solid #dfd4be;border-radius:12px;background:var(--surface,#fff)}.recommendation-card h4{font-size:18px;margin:12px 0}.recommendation-card p,.recommendation-card dd{overflow-wrap:anywhere}.recommendation-card dl{font-size:14px}.recommendation-card dt{font-weight:700;margin-top:8px}.recommendation-card dd{margin:4px 0 0}.recommendation-card .button{margin-top:auto;white-space:normal}.recommendation-badge{align-self:flex-start;font-size:12px;padding:4px 8px;border-radius:20px;background:#e4edd9;color:#294322}.recommendation-match{font-weight:600;font-size:14px}.recommendations .hint{line-height:1.65}@media(max-width:1100px){.recommendation-grid{grid-template-columns:1fr}.recommendation-card{padding:16px}}@media(max-width:600px){.recommendations{padding:14px}}
.blend-component{display:grid;grid-template-columns:minmax(0,1fr) 110px 32px;gap:12px;align-items:end;padding:16px 0;border-bottom:1px solid #cbd5ce}
.blend-component label{min-width:0}.blend-component select,.blend-component input{width:100%;min-width:0}.blend-component small{grid-column:1/-1}.blend-component:has([data-blend-name]){grid-template-columns:minmax(0,1fr)}
.blend-example{padding:18px 0;border-bottom:1px solid #cbd5ce}.blend-example img{width:96px;height:96px;object-fit:contain;float:right;margin:0 0 12px 12px}.blend-example h3{font-size:18px;line-height:1.5}.blend-example dl{clear:both}.blend-example dl div{display:flex;justify-content:space-between;gap:12px;padding:4px 0}.blend-example dt{overflow-wrap:anywhere}.blend-example dd{white-space:nowrap}.blend-summary td{overflow-wrap:anywhere}
@media(max-width:600px){.blend-component{grid-template-columns:minmax(0,1fr) 90px 28px;gap:6px}.blend-component label:first-child{grid-column:1/-1}.blend-component:has([data-blend-name]){grid-template-columns:minmax(0,1fr)}.blend-summary .table-scroll{max-width:100%;overflow-x:auto}}
.design-route .blend-current{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid #d9dedb}.blend-ratio-bar{display:flex;width:100%;height:20px;overflow:hidden;background:#edf0ee}.blend-ratio-bar span{min-width:0;flex-shrink:1}.blend-tone-0{background:#216d56}.blend-tone-1{background:#b04f53}.blend-tone-2{background:#376f9d}.blend-tone-3{background:#a27712}.blend-tone-4{background:#6e5c99}.blend-tone-5{background:#467839}.blend-amount{grid-template-columns:minmax(0,1fr) 110px;align-items:center}.blend-amount label,.blend-amount strong{margin:0}.blend-current ul{max-height:240px;overflow:auto}.blend-current ul{list-style:none;padding:0;display:grid;gap:6px}.blend-current li{display:flex;gap:8px;align-items:center;overflow-wrap:anywhere}.blend-current li strong{margin-left:auto;white-space:nowrap}.blend-current li i{width:10px;height:10px;flex:none}
.blend-layout .design-next{position:static}
@media(max-width:700px){.blend-layout .design-steps{flex-wrap:wrap;overflow:visible}.blend-layout .design-steps button{flex:1 1 95px;white-space:normal}.blend-layout .design-editor{padding-bottom:70px}}
.blend-draft-label{display:inline-block;color:#236554;background:#e8f3ec;padding:4px 7px;font-size:12px;border-radius:4px}.blend-component-images{margin:10px 0}.blend-component-images>div{display:flex;gap:8px}.blend-example .blend-component-images img{float:none;width:56px;height:56px;object-fit:contain;margin:0}.blend-component-images figcaption{font-size:11px;margin-top:4px}.blend-existing,.blend-more{border-top:1px solid #cbd5ce;padding:16px 0}.blend-existing summary,.blend-more summary{cursor:pointer;line-height:1.6;font-weight:600}.blend-sample h3{overflow-wrap:anywhere}.blend-sample .hint{line-height:1.6}
.blend-mobile-chart{display:none}
@media(max-width:900px){.blend-mobile-chart{display:block;margin:16px 0 8px}}
/* Blend builder: all rules are scoped to the blend screens. */
.blend-dot{display:inline-block;width:13px;height:13px;border:1px solid #9e9586;border-radius:50%;flex:none;margin-right:5px;vertical-align:middle}.blend-unknown{background-image:repeating-linear-gradient(45deg,transparent,transparent 3px,#777 3px,#777 4px)}.blend-bowl{display:block;width:100%;max-width:330px;margin:auto}.blend-current li small,.blend-summary td small{display:block;font-size:12px;line-height:1.6}.blend-current li span{min-width:0;flex:1}.blend-current li strong{font-size:12px}.blend-current li button{padding:4px}.blend-sale{border-bottom:1px solid #d9cfba;padding:12px 0}.blend-sale summary{cursor:pointer;line-height:1.6;font-weight:600}.blend-sale .blend-example{border:0}.blend-mobile-examples{display:none}.blend-mobile-chart>div:last-child{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}.blend-layout .design-next button:disabled{opacity:.4;cursor:not-allowed}.blend-layout .blend-custom{grid-template-columns:minmax(0,1fr)}
@media(max-width:900px){.blend-mobile-examples{display:block;padding:16px 0}.blend-layout .blend-mobile-chart{display:block;position:sticky;top:0;z-index:3;background:var(--surface,#fffaf0);padding:12px 0;border-bottom:1px solid #d9cfba}.blend-mobile-chart .button{font-size:12px;padding:9px}.blend-layout .design-preview .blend-selling{display:none}.blend-layout .design-editor{overflow:visible}.blend-current ul{max-height:none}.blend-layout .design-next{position:static}.blend-mobile-examples .blend-example img{width:86px;height:86px}}



/* 혼합곡 구성품 버튼 — 타일형 (2026-09-22 개선안). studio-visual.css의 기존 혼합곡 버튼 규칙을 이 블록으로 교체 */
.blend-group{margin:22px 0}
.blend-group .group-head{display:flex;align-items:baseline;gap:8px;margin:0 0 2px}
.blend-group h3{margin:0;font-size:16px;font-weight:700;color:#362a20}
.blend-group h3 small{margin-left:4px;font-size:12px;font-weight:600;color:#537247}
.blend-group .group-count{font-size:12px;color:#9b9084}
.blend-group>.hint{margin:0 0 10px;font-size:13px;color:#8b8074}

.blend-buttons{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.blend-button-pair{display:flex;align-items:stretch;min-width:0;border:1px solid #e7ddcf;border-radius:10px;background:#fff;transition:border-color .15s,box-shadow .15s,background-color .15s}
.blend-button-pair:hover{border-color:#cdbfa8;box-shadow:0 1px 3px rgba(54,42,32,.08)}
.blend-button-pair.is-selected{border-color:#537247;background:#f2f7ec;box-shadow:inset 0 0 0 1px #537247}
.blend-button-pair.is-open{box-shadow:0 0 0 3px rgba(83,114,71,.22)}
.blend-button-pair.is-selected.is-open{box-shadow:inset 0 0 0 1px #537247,0 0 0 3px rgba(83,114,71,.22)}

.blend-pick{flex:1;min-width:0;display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 2px 8px 12px;border:0;border-radius:10px 0 0 10px;background:none;color:#362a20;font:inherit;font-size:14px;font-weight:500;line-height:1.3;text-align:left;cursor:pointer}
.blend-pick .blend-name{min-width:0;word-break:keep-all;overflow-wrap:anywhere}
.blend-pick .blend-dot,.blend-info-panel h4 .blend-dot{display:inline-block;flex:none;width:12px;height:12px;border:0;border-radius:50%;margin:0;box-shadow:inset 0 0 0 1px rgba(54,42,32,.22)}
.is-selected .blend-pick{color:#2f4a26;font-weight:700}
.blend-check{flex:none;color:#537247;font-size:13px;font-weight:700}
.blend-pick:disabled{opacity:.45;cursor:not-allowed}

.blend-buttons .material-info{flex:none;display:grid;place-items:center;width:34px;min-height:44px;padding:0;border:0;border-radius:0 10px 10px 0;background:none;color:#a3998c;cursor:pointer}
.blend-buttons .material-info svg{display:block;width:16px;height:16px}
.blend-buttons .material-info:hover,.blend-buttons .material-info[aria-expanded=true]{color:#537247}
.blend-pick:focus-visible,.blend-buttons .material-info:focus-visible{outline:2px solid #537247;outline-offset:-3px}

.blend-info-panel{margin-top:10px;padding:14px 16px 12px;border:1px solid #e7ddcf;border-radius:12px;background:#fbf8f2;line-height:1.65;overflow-wrap:anywhere}
.blend-info-panel h4{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:15px;color:#362a20}
.blend-info-panel .blend-kind{padding:1px 8px;border-radius:999px;background:#efe6d8;color:#6d5b43;font-size:11px;font-weight:600}
.blend-info-panel .info-summary{margin:0 0 6px;font-size:14px;color:#362a20}
.blend-info-panel .info-taste{margin:0;font-size:13px;color:#6f6356}
.blend-info-panel .info-taste b{margin-right:6px;color:#8b8074;font-weight:600}
.blend-info-panel .info-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin-top:10px;padding-top:10px;border-top:1px solid #ece4d7}
.blend-info-panel .info-disclaimer{margin:0;font-size:12px;color:#9b9084}
.blend-info-panel .pack-choices{display:flex;gap:6px;margin:0}
.blend-info-panel .pack-choices button{min-height:36px;padding:0 14px;border-radius:8px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.blend-info-panel .blend-panel-close{border:0;background:none;color:#6f6356}
.blend-info-panel .blend-panel-pick{border:1px solid #537247;background:#537247;color:#fff}
.blend-info-panel .blend-panel-pick.is-selected{background:#fff;color:#537247}
.blend-info-panel .pack-choices button:disabled{opacity:.45;cursor:not-allowed}
.blend-info-panel .pack-choices button:focus-visible{outline:2px solid #537247;outline-offset:2px}

.studio-dark .blend-button-pair{background:#332d23;border-color:#5a4a33}
.studio-dark .blend-button-pair.is-selected{background:#3a4630;border-color:#9cc27a;box-shadow:inset 0 0 0 1px #9cc27a}
.studio-dark .blend-pick{color:#f4e8d1}
.studio-dark .is-selected .blend-pick{color:#e3f0d3}
.studio-dark .blend-buttons .material-info{color:#a8987f}
.studio-dark .blend-buttons .material-info:hover,.studio-dark .blend-buttons .material-info[aria-expanded=true],.studio-dark .blend-check{color:#b8d99a}
.studio-dark .blend-info-panel{background:#2c261e;border-color:#5a4a33}
.studio-dark .blend-info-panel h4,.studio-dark .blend-info-panel .info-summary{color:#f4e8d1}
.studio-dark .blend-button-pair:hover{border-color:#7a6547}
.studio-dark .blend-group h3{color:#f4e8d1}
.studio-dark .blend-group>.hint,.studio-dark .blend-group .group-count{color:#b3a48a}
.studio-dark .blend-info-panel .info-taste,.studio-dark .blend-info-panel .blend-panel-close{color:#d8c9ae}
.studio-dark .blend-info-panel .info-taste b,.studio-dark .blend-info-panel .info-disclaimer{color:#b3a48a}
.studio-dark .blend-info-panel .blend-kind{background:#4a3f2e;color:#e8d9bd}
.studio-dark .blend-info-panel .info-foot{border-top-color:#4a3f2e}
.studio-dark .blend-info-panel .blend-panel-pick.is-selected{background:transparent;border-color:#9cc27a;color:#b8d99a}

@media(max-width:480px){
 .blend-buttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 .blend-pick{gap:6px;padding:8px 0 8px 8px;font-size:13px}
 .blend-pick .blend-dot{width:10px;height:10px}
 .blend-buttons .material-info{width:32px}
 .blend-check{display:none}
}
/* Live layout compatibility: retain at most five columns and keep the panel clear of the mobile fixed action. */
@media(min-width:481px){.blend-buttons{grid-template-columns:repeat(auto-fill,minmax(max(150px,calc((100% - 32px)/5)),1fr))}}
.blend-info-panel{scroll-margin-bottom:80px}
.studio-dark .blend-button-pair.is-open{box-shadow:0 0 0 3px rgba(156,194,122,.3)}
.studio-dark .blend-button-pair.is-selected.is-open{box-shadow:inset 0 0 0 1px #9cc27a,0 0 0 3px rgba(156,194,122,.3)}