/* Studio layout keeps photo and copy controls beside the real export preview, while collapsing into one readable flow on smaller screens. */
.studio h2 { font-size:15px; margin:0 0 16px; }
.studio-search { min-width:180px; max-width:360px; flex:1; }
.studio-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; }
.studio-list-card { color:var(--text); text-decoration:none; overflow:hidden; transition:box-shadow .15s; }
.studio-list-card:hover { box-shadow:var(--sh-lg); }
.studio-card-photo { height:220px; background:var(--surface-3); overflow:hidden; }
.studio-card-photo img { width:100%; height:100%; object-fit:cover; }
.studio-card-photo > span { height:100%; display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; color:var(--text-3); }
.studio-editor { display:grid; grid-template-columns:minmax(330px,.92fr) minmax(350px,1.08fr); gap:24px; align-items:start; }
.studio-controls,.studio-fields,.studio-preview { display:grid; gap:18px; min-width:0; }
.studio-fields { border:0; padding:0; margin:0; }
.studio-fields:disabled { opacity:.8; }
.studio-preview { position:sticky; top:76px; }
.studio-preview > .card { min-width:0; }
.studio-step { display:flex; align-items:center; gap:10px; }
.studio-step > span { display:grid; place-items:center; width:25px; height:25px; border:1px solid var(--border-strong); border-radius:50%; font-size:12px; color:var(--text-2); }
.studio .field > span { display:block; font-size:12px; font-weight:600; margin-bottom:6px; }
.studio .field { display:block; margin-top:14px; }
.studio .textarea { width:100%; resize:vertical; }
.studio .two-col { gap:14px; }
.studio-upload { position:relative; cursor:pointer; }
.studio-upload input { position:absolute; width:1px; height:1px; opacity:0; }
.studio-upload:focus-within { outline:2px solid var(--accent); outline-offset:3px; }
.studio-colors { display:flex; align-items:end; gap:15px; flex-wrap:wrap; margin-top:16px; }
.studio-colors label { display:flex; flex-direction:column; gap:6px; font-size:12px; }
.studio-colors input { width:52px; height:32px; padding:2px; border:1px solid var(--border-strong); border-radius:6px; background:var(--surface); }
.studio-canvas-wrap { display:flex; justify-content:center; padding:20px; margin-top:18px; background:var(--bg-sunken); border-radius:var(--r-sm); }
.studio canvas { display:block; max-width:100%; max-height:620px; width:auto; height:auto; box-shadow:var(--sh); }
.studio details > summary { cursor:pointer; font-size:13px; font-weight:600; padding:4px 0; }
.studio details[open] > summary { margin-bottom:12px; }
.studio-versions { display:grid; gap:12px; margin-top:12px; max-height:280px; overflow:auto; }
.studio-versions > div { border-top:1px solid var(--border); padding-top:10px; }
.studio-notice { background:var(--accent-soft); border:1px solid var(--border-strong); padding:14px; border-radius:var(--r-sm); margin-bottom:18px; font-size:13px; }
.studio-notice .btn { margin-left:8px; }
.studio-warning { color:var(--danger); }
.studio [hidden] { display:none!important; }
.studio input[type="range"] { width:100%; accent-color:var(--accent); }
.studio .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media(max-width:1100px) { .studio-editor { grid-template-columns:minmax(280px,1fr) minmax(300px,1fr); gap:16px; } .studio-canvas-wrap { padding:10px; } }
@media(max-width:850px) { .studio-editor { grid-template-columns:1fr; } .studio-preview { position:static; } .studio canvas { max-height:680px; } .studio .page-head { align-items:start; } }
/* 카드뉴스 */
.cn-slides { display: flex; flex-direction: column; gap: 10px; }
.cn-slide { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.cn-slide.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.cn-slide .input.sm, .cn-slide .select.sm { height: 30px; font-size: 12px; }
.cn-analysis { padding: 10px 12px; border-radius: 10px; background: var(--surface-2, rgba(0,0,0,.04)); }
.cn-strip { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 4px; }
.cn-thumb { position: relative; flex: none; width: 72px; padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; }
.cn-thumb canvas { display: block; width: 100%; height: auto; border-radius: 6px; background: var(--surface-3, #eee); }
.cn-thumb span { position: absolute; left: 4px; top: 4px; font-size: 10px; font-weight: 700; color: #fff; background: rgba(0,0,0,.55); border-radius: 4px; padding: 0 4px; }
.cn-thumb.on { border-color: var(--accent); }
/* AI 착장컷 */
.ai-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.ai-shot { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ai-shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; background: var(--surface-3, #eee); }
.ai-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ai-roles > div { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.ai-roles ul { margin: 6px 0 8px 16px; padding: 0; }
@media (max-width: 640px) { .ai-roles { grid-template-columns: 1fr; } }
.ai-shot video { width: 100%; aspect-ratio: 9 / 16; border-radius: 8px; background: #000; }
/* 0 따라 할 레퍼런스 · AI results large (UX 4차) */
.studio-ref .ref-follow { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: start; }
.studio-ref .ref-follow img { width: 150px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; cursor: zoom-in; background: var(--surface-3, #eee); }
.studio-ref .ref-follow .why { margin: 6px 0 0; padding-left: 18px; }
.studio-ref .ref-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.studio-ref .ref-board img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; cursor: pointer; background: var(--surface-3, #eee); }
.ai-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ai-shot img[data-ai-zoom] { cursor: zoom-in; border-radius: 10px; }
/* 6차: 게시 결과 · 달력 · 레퍼런스 따라 만든 게시물 */
.studio-card-photo { position:relative; }
.studio-card-photo .studio-card-posted { position:absolute; right:10px; bottom:10px; width:54px; height:68px; object-fit:cover; border-radius:8px; border:2px solid #fff; box-shadow:var(--sh); }
.studio-result { margin-bottom:18px; }
.studio-result h2 { margin:0; }
.res-body { display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:18px; margin-top:12px; align-items:start; }
.res-body .res-tiles { grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }
.studio-result.is-ask { border-color:var(--warning); box-shadow:0 0 0 3px var(--warning-soft); }
.studio-result.is-wait { padding-top:12px; padding-bottom:12px; }
.studio-result.is-wait h2 { font-size:15px; }
.res-main { display:flex; gap:14px; margin-top:12px; align-items:flex-start; }
.res-ask { display:flex; gap:14px; margin-top:10px; align-items:flex-start; }
.res-ask > .vs { align-self:center; font-weight:800; color:var(--text-3); }
.res-vs .row { align-items:flex-start; } .res-vs .row > .vs { align-self:center; }
.res-pic { position:relative; flex:none; width:120px; padding:0; border:0; background:none; cursor:pointer; text-align:left; }
.res-pic img { width:120px; aspect-ratio:4/5; object-fit:cover; border-radius:10px; background:var(--surface-3); display:block; }
.res-pic > span { display:block; font-size:11.5px; color:var(--text-2); margin-top:4px; font-weight:600; }
.res-pic em { display:block; font-style:normal; font-size:11.5px; color:var(--text-3); }
.res-tiles { flex:1; min-width:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.res-tile { background:var(--surface-2); border-radius:10px; padding:8px 10px; display:flex; flex-direction:column; gap:3px; min-width:0; }
.res-tile > span { font-size:11.5px; color:var(--text-2); display:flex; align-items:center; gap:2px; }
.res-tile strong { font-size:18px; line-height:1.2; }
.res-tile .verdict { align-self:flex-start; }
.res-vs { padding-left:18px; border-left:1px solid var(--border); display:grid; gap:8px; max-width:300px; }
.res-vs p { margin:0; }
.res-vs .vs { align-self:center; font-weight:800; color:var(--text-3); }
.res-vs .res-pic, .res-vs .res-pic img { width:104px; }
.linklike { background:none; border:0; padding:0; color:var(--accent); cursor:pointer; font:inherit; }
.linklike:hover { text-decoration:underline; }
.studio-cal-wrap { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:16px; align-items:start; }
.studio-cal { background:var(--bg-elev); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.cal-head { display:flex; align-items:center; gap:6px; padding:10px 12px; border-bottom:1px solid var(--border); }
.cal-head b { font-size:15px; min-width:96px; text-align:center; }
.cal-legend { margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; }
.cal-legend span { display:inline-flex; align-items:center; gap:4px; }
.cal-legend i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.cal-dow { font-size:11.5px; font-weight:700; color:var(--text-3); padding:6px 8px; border-bottom:1px solid var(--border); }
.cal-day { border-right:1px solid var(--border); border-bottom:1px solid var(--border); padding:4px 5px 6px; display:flex; flex-direction:column; gap:3px; min-width:0; transition:background .12s; }
.cal-day:nth-child(7n+7) { border-right:0; }
.cal-day.out { background:var(--surface-2); }
.cal-day.out .cal-date { color:var(--text-3); }
.cal-day.today .cal-date { background:var(--accent); color:#fff; border-radius:999px; padding:0 6px; }
.cal-day.drop, .cal-side.drop { background:var(--accent-soft); outline:2px dashed var(--accent); outline-offset:-3px; }
.cal-date { font-size:12px; font-weight:700; align-self:flex-start; }
.cal-chip { display:flex; align-items:center; gap:5px; padding:2px 5px 2px 2px; border-radius:7px; font-size:11.5px; line-height:1.3; color:var(--text); text-decoration:none; background:var(--surface-2); border-left:3px solid var(--text-3); min-width:0; cursor:pointer; }
.cal-chip[draggable="true"] { cursor:grab; }
.cal-chip.dragging { opacity:.45; }
.cal-chip:hover { background:var(--surface-3); }
.cal-chip img, .cal-chip i { flex:none; width:22px; height:28px; border-radius:4px; object-fit:cover; background:var(--surface-3); display:block; }
.cal-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.cal-chip.st-draft, .cal-legend .st-draft { border-left-color:var(--text-3); } .cal-legend i.st-draft { background:var(--text-3); }
.cal-chip.st-production, .cal-legend .st-production { border-left-color:var(--accent); } .cal-legend i.st-production { background:var(--accent); }
.cal-chip.st-review, .cal-legend .st-review { border-left-color:var(--warning); } .cal-legend i.st-review { background:var(--warning); }
.cal-chip.st-done, .cal-legend .st-done { border-left-color:var(--success); } .cal-legend i.st-done { background:var(--success); }
.cal-chip.cal-posted { background:transparent; border:1px dashed var(--success); border-left:3px solid var(--success); }
.cal-legend i.cal-posted-dot { background:transparent; border:1px dashed var(--success); }
.cal-chip b.lvl-good { color:var(--success); } .cal-chip b.lvl-low { color:var(--danger); } .cal-chip b.lvl-mid, .cal-chip b.lvl-na { color:var(--text-2); }
.cal-side { display:flex; flex-direction:column; gap:5px; position:sticky; top:76px; max-height:calc(100vh - 100px); overflow:auto; }
.cal-side p { margin:0 0 4px; }
.ref-learn { margin-bottom:18px; }
.ref-learn-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
.ref-learn-card { display:flex; gap:10px; align-items:flex-start; padding:10px; border:1px solid var(--border); border-radius:14px; background:var(--bg-elev); }
.ref-learn-card .vs { align-self:center; font-weight:800; color:var(--text-3); font-size:12px; }
.ref-learn-card .res-pic, .ref-learn-card .res-pic img { width:84px; }
.ref-learn-card .grow { min-width:0; display:flex; flex-direction:column; gap:6px; }
.home-make-card { position:relative; }
.home-make-card .home-make-send { margin-top:auto; align-self:flex-start; }
@media(max-width:1100px) { .res-body { grid-template-columns:120px minmax(0,1fr); } .res-body .res-vs { grid-column:1 / -1; border-left:0; padding-left:0; border-top:1px solid var(--border); padding-top:12px; max-width:none; } .studio-cal-wrap { grid-template-columns:1fr; } .cal-side { position:static; max-height:none; } }
.studio-card-photo img.is-ref { filter:saturate(.85); opacity:.9; }
.studio-card-reflabel { position:absolute; left:10px; bottom:10px; font-style:normal; font-size:11px; font-weight:700; color:#fff; background:rgba(0,0,0,.55); padding:3px 8px; border-radius:999px; }
.home-make-body > a { color:var(--text); text-decoration:none; } .home-make-body > a:hover b { text-decoration:underline; }
.own-made { display:inline-block; font-size:11px; font-weight:700; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:0 6px; text-decoration:none; }
.own-photo-chips .own-made { color:#fff; background:var(--accent); }
/* 편집기 맨 아래 휴지통 줄, AI 사진 칸의 '엔진 설정 (고급)' 접기 */
.studio-trash-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 2px 12px; }
.studio-adv > summary { cursor: pointer; color: var(--text-2); }