/* 노래 제작 (public/song_maker.php at /create), redesign 2026-10-11. Classes: sm-*.
   Tabs: 장르 · 테마 · 키즈 · 게임·BGM · 브랜드 · 보이스 · 레퍼런스.
   Layout: compact header → sticky tab bar (top = --sm-stick, set by js under the fixed site header) → numbered
   step cards (✓ once done, the first step names the pick) beside a sticky summary card; below 1021px the summary
   moves under the steps and the floating dock (.sm-dock) keeps the pick and the make button in reach.
   Rules start with .sm-page (or #songMakerMain for form fields) so they outrank the shell's
   :is(button,input,select,textarea){font:inherit} and its (0,4,2) !important form rule; headings carry !important
   because the shell recolours h1–h3. Card artwork comes from public/includes/song_maker_artwork.php. */

.sm-page{
  --sm-accent:var(--omu-primary,#6d3be8);--sm-accent-ink:var(--omu-primary-ink,#572fba);--sm-accent-rgb:var(--omu-primary-rgb,109,59,232);
  --sm-accent-2:color-mix(in srgb,var(--sm-accent) 62%,#f0569b);
  --sm-soft:var(--omu-primary-soft,#f5f1fd);--sm-soft-2:var(--omu-primary-soft-strong,#ebe4fc);
  --sm-ink:#1c1b22;--sm-text:#45434f;--sm-muted:#7a7885;--sm-line:#ebe9f1;--sm-field:#d9d7e3;--sm-cream:#f6f5fa;--sm-bg:#f7f6fb;
  --sm-ring:color-mix(in srgb,var(--sm-accent) 40%,transparent);
  --sm-card:0 1px 2px rgba(28,24,48,.04),0 0 0 1px var(--sm-line);
  --sm-lift:0 16px 30px -22px rgba(28,24,48,.45),0 0 0 1px var(--sm-field);
  --sm-shadow:0 18px 44px -28px rgba(28,24,48,.42);
  --sm-pad:var(--am-gutter,40px);
  display:block;box-sizing:border-box;width:100%;margin:0;padding:22px var(--sm-pad) 110px;
  color:var(--sm-text);font-size:16px;line-height:1.6;word-break:keep-all;overflow-wrap:break-word;
  background:radial-gradient(900px 360px at 92% -60px,rgba(var(--sm-accent-rgb),.10),rgba(255,255,255,0) 70%),radial-gradient(700px 320px at -8% 0,rgba(255,204,150,.16),rgba(255,255,255,0) 70%),var(--sm-bg)
}
.sm-page *,.sm-page *::before,.sm-page *::after{box-sizing:border-box}
.sm-page [hidden]{display:none!important}
.sm-page button{cursor:pointer;-webkit-tap-highlight-color:transparent}
.sm-page :is(button,a,input,textarea,summary,select):focus-visible{outline:3px solid var(--sm-ring)!important;outline-offset:2px}
html body .sm-page :is(h1,h2,h3){margin:0;font-family:inherit;color:var(--sm-ink)!important}
.sm-page .sm-eyebrow{margin:0;color:var(--sm-accent-ink)!important;font-size:13px;font-weight:800;letter-spacing:.06em}
.sm-page .sm-hl{color:var(--sm-accent);white-space:nowrap;background:linear-gradient(transparent 70%,rgba(255,207,110,.5) 70%,rgba(255,207,110,.5) 92%,transparent 92%)}
/* Scroll targets clear the sticky tab bar (and the dock below 1021px). */
.sm-page :is(.sm-step,.sm-input,.sm-moods,.sm-summary,.sm-progress,.sm-results){scroll-margin-top:calc(var(--sm-stick,0px) + 112px);scroll-margin-bottom:120px}
.sm-page .sm-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Header (compact) ---------- */
.sm-page .sm-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;margin:0 0 6px}
.sm-page .sm-head__copy{min-width:0;flex:1 1 420px}
html body .sm-page .sm-title{margin-top:6px!important;font-size:clamp(25px,2.5vw,33px)!important;font-weight:800!important;line-height:1.25!important;letter-spacing:-.035em!important}
.sm-page .sm-title br{display:none}
.sm-page .sm-lede{max-width:44em;margin:6px 0 0;color:var(--sm-muted);font-size:15px;line-height:1.65}
.sm-page .sm-wallet{padding:10px 10px 10px 18px;border-radius:20px;background:#fff;box-shadow:var(--sm-card),var(--sm-shadow)}
.sm-page .sm-wallet>span:not(.sm-wallet__note),.sm-page .sm-wallet>strong{display:block}
.sm-page .sm-wallet__label{color:var(--sm-muted);font-size:12.5px;font-weight:700;line-height:1.3}
.sm-page .sm-wallet__value{color:var(--sm-ink);font-size:22px;font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums}
.sm-page .sm-wallet__value--text{font-size:16px}
.sm-page .sm-wallet__note{display:none}
.sm-page .sm-wallet{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:16px}
.sm-page .sm-wallet__label{grid-column:1;grid-row:1}
.sm-page .sm-wallet__value{grid-column:1;grid-row:2}
.sm-page .sm-wallet__link{grid-column:2;grid-row:1 / span 2;align-self:center;display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:0;border-radius:14px;background:var(--sm-soft);color:var(--sm-accent-ink)!important;font-size:14px;font-weight:800;text-decoration:none!important;white-space:nowrap}
.sm-page .sm-wallet__link:hover{background:var(--sm-soft-2)}

/* ---------- Tab bar (sticky under the fixed site header) ---------- */
.sm-page .sm-tabs{position:sticky;top:var(--sm-stick,0px);z-index:30;margin:0 calc(var(--sm-pad) * -1) 16px;padding:12px var(--sm-pad) 10px;background:linear-gradient(var(--sm-bg) 78%,rgba(247,246,251,0));transition:background .2s,box-shadow .2s}
.sm-page .sm-tabs.is-stuck{background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);box-shadow:0 1px 0 var(--sm-line),0 12px 24px -22px rgba(28,24,48,.4)}
.sm-page .sm-tabs__list{display:flex;gap:4px;padding:5px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;border-radius:18px;background:#fff;box-shadow:var(--sm-card)}
.sm-page .sm-tabs__list::-webkit-scrollbar{display:none}
.sm-page .sm-tab{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 14px 0 8px;border:0;border-radius:14px;background:transparent;color:var(--sm-text);font:inherit;font-size:15px;font-weight:750;letter-spacing:-.015em;white-space:nowrap;scroll-snap-align:start;transition:background .18s,color .18s}
.sm-page .sm-tab:hover{background:var(--sm-cream);color:var(--sm-ink)}
.sm-page .sm-tab__icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:var(--sm-soft);color:var(--sm-accent-ink);transition:background .18s,color .18s}
.sm-page .sm-tab__icon svg{width:18px;height:18px}
.sm-page .sm-tab[aria-selected="true"]{background-color:var(--sm-accent);background-image:linear-gradient(135deg,var(--sm-accent),var(--sm-accent-2));color:#fff;box-shadow:0 10px 20px -12px rgba(var(--sm-accent-rgb),.9)}
.sm-page .sm-tab[aria-selected="true"] .sm-tab__icon{background:rgba(255,255,255,.2);color:#fff}
.sm-page .sm-tab__badge{padding:2px 7px;border-radius:999px;background:#ffe9a8;color:#7a4b00;font-size:11px;font-weight:800}
.sm-page .sm-tabhint{display:flex;align-items:center;gap:6px;margin:8px 4px 0;color:var(--sm-muted);font-size:13.5px;font-weight:600;line-height:1.4}
.sm-page .sm-tabhint::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--sm-accent)}
.sm-page .sm-tabhint:empty{display:none}

/* ---------- Layout ---------- */
.sm-page .sm-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.sm-page .sm-flow{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0}
.sm-page .sm-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0}

/* ---------- Step cards ---------- */
.sm-page .sm-step{position:relative;padding:24px;border-radius:24px;background:#fff;box-shadow:var(--sm-card),0 18px 40px -38px rgba(28,24,48,.5)}
.sm-page .sm-step__head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 12px;margin-bottom:18px}
.sm-page .sm-step__head>div{flex:1 1 220px;min-width:0}
.sm-page .sm-step__num{position:relative;display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:11px;background:var(--sm-soft);color:var(--sm-accent-ink);font-size:15px;font-weight:800;transition:background .2s,color .2s}
.sm-page .sm-step[data-done="true"] .sm-step__num{background:var(--sm-accent);color:transparent}
.sm-page .sm-step[data-done="true"] .sm-step__num::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/16px no-repeat}
html body .sm-page .sm-step__head h2{font-size:19px!important;font-weight:800!important;line-height:1.4!important;letter-spacing:-.025em!important}
.sm-page .sm-step__head p{margin:2px 0 0;color:var(--sm-muted);font-size:14px;line-height:1.55}
.sm-page .sm-step__pick{align-self:center;max-width:46%;overflow:hidden;padding:6px 12px;border-radius:999px;background:var(--sm-soft);color:var(--sm-accent-ink);font-size:13px;font-weight:800;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.sm-page .sm-optional{margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--sm-cream);color:var(--sm-muted);font-size:12px;font-weight:700;vertical-align:middle}
.sm-page .sm-sublabel{margin:20px 0 8px;color:var(--sm-ink);font-size:14.5px;font-weight:800}

/* ---------- 장르 ---------- */
.sm-page .sm-genres{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.sm-page .sm-genres--more{margin-top:10px}
.sm-page .sm-genre{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:0;padding:6px 6px 12px;border:0;border-radius:18px;background:#fff;box-shadow:var(--sm-card);color:var(--sm-ink);text-align:left;font:inherit;transition:transform .18s ease,box-shadow .18s ease}
.sm-page .sm-genre:hover{transform:translateY(-2px);box-shadow:var(--sm-lift)}
.sm-page .sm-genre__art{display:block;width:100%;aspect-ratio:5/4;margin-bottom:8px;border-radius:13px;overflow:hidden;background:linear-gradient(135deg,var(--g1),var(--g2))}
.sm-page .sm-genre__art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.sm-page .sm-genre__name{padding:0 6px;font-size:15.5px;font-weight:800;line-height:1.3;letter-spacing:-.02em}
.sm-page .sm-genre__desc{overflow:hidden;padding:0 6px;color:var(--sm-muted);font-size:12.5px;line-height:1.45;text-overflow:ellipsis;white-space:nowrap}
.sm-page .sm-genre[aria-checked="true"]{background:color-mix(in srgb,var(--g1) 9%,#fff);box-shadow:0 0 0 2.5px var(--g1),0 16px 28px -20px var(--g1)}
.sm-page .sm-genre[aria-checked="true"]::after{content:"";position:absolute;top:12px;right:12px;width:24px;height:24px;border-radius:50%;box-shadow:0 0 0 2px #fff;background:var(--g1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat}
.sm-page .sm-more{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 10px;width:100%;min-height:46px;margin-top:10px;padding:10px 16px;border:0;border-radius:14px;background:var(--sm-cream);box-shadow:inset 0 0 0 1px var(--sm-line);color:var(--sm-ink);font:inherit;font-size:14.5px;font-weight:800}
.sm-page .sm-more small{color:var(--sm-muted);font-size:12.5px;font-weight:600}
.sm-page .sm-more:hover{background:var(--sm-soft)}
.sm-page .sm-moods{margin-top:14px;padding:14px 16px 16px;border-radius:18px;background:var(--sm-cream);box-shadow:inset 0 0 0 1px var(--sm-line);animation:sm-rise .24s ease-out}
.sm-page .sm-moods .sm-sublabel{margin:0 0 10px}
.sm-page .sm-chips{display:flex;flex-wrap:wrap;gap:8px}
.sm-page .sm-chip{min-height:42px;padding:0 17px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--sm-field);color:var(--sm-ink);font:inherit;font-size:15px;font-weight:750}
.sm-page .sm-chip:hover{box-shadow:inset 0 0 0 1.5px var(--sm-accent)}
.sm-page .sm-chip[aria-checked="true"]{background:var(--sm-ink);color:#fff;box-shadow:none}

/* ---------- Story fields ---------- */
.sm-page .sm-themes{display:flex;flex-wrap:wrap;gap:6px}
.sm-page .sm-theme{min-height:36px;padding:0 13px;border:0;border-radius:999px;background:var(--sm-cream);box-shadow:inset 0 0 0 1px var(--sm-line);color:var(--sm-text);font:inherit;font-size:13.5px;font-weight:700}
.sm-page .sm-theme:hover,.sm-page .sm-theme.is-picked{background:var(--sm-soft);box-shadow:inset 0 0 0 1.5px var(--sm-accent);color:var(--sm-accent-ink)}
.sm-page .sm-label{display:flex;align-items:center;gap:8px;margin:18px 0 8px;color:var(--sm-ink);font-size:14.5px;font-weight:800}
.sm-page .sm-step__head + .sm-label{margin-top:0}
.sm-page .sm-counter{margin-left:auto;color:var(--sm-muted);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
#songMakerMain .sm-input{display:block;width:100%;min-height:50px;padding:12px 15px;border:1.5px solid var(--sm-field)!important;border-radius:14px!important;background:#fff!important;color:var(--sm-ink)!important;font-size:16px;line-height:1.6;box-shadow:none!important;transition:border-color .15s,box-shadow .15s}
#songMakerMain textarea.sm-input{resize:vertical}
#songMakerMain .sm-input:hover{border-color:#c9c7d6!important}
#songMakerMain .sm-input:focus{border-color:var(--sm-accent)!important;outline:0!important;box-shadow:0 0 0 4px rgba(var(--sm-accent-rgb),.14)!important}
#songMakerMain .sm-input::placeholder{color:#a5a3b0}
.sm-page .sm-req{padding:2px 8px;border-radius:999px;background:var(--sm-soft);color:var(--sm-accent-ink);font-size:12px;font-weight:800}
.sm-page .sm-label .sm-optional{margin-left:0}
.sm-page .sm-fieldhelp{margin:6px 2px 0;color:var(--sm-muted);font-size:13px}
.sm-page .sm-lyrics{margin-top:16px;border-radius:16px;background:var(--sm-cream);box-shadow:inset 0 0 0 1px var(--sm-line)}
.sm-page .sm-lyrics summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:13px 16px;cursor:pointer;list-style:none;color:var(--sm-ink);font-size:14.5px;font-weight:800}
.sm-page .sm-lyrics summary::-webkit-details-marker{display:none}
.sm-page .sm-lyrics summary::before{content:"+";display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1px var(--sm-field);font-size:15px;line-height:1}
.sm-page .sm-lyrics[open] summary::before{content:"–"}
.sm-page .sm-lyrics summary small{color:var(--sm-muted);font-size:12.5px;font-weight:600}
.sm-page .sm-lyrics textarea{margin:0 16px;width:calc(100% - 32px)!important}
.sm-page .sm-help{margin:8px 16px 14px;color:var(--sm-muted);font-size:13px}

/* ---------- Voice and language ---------- */
.sm-page .sm-segment{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:15px;background:var(--sm-cream);box-shadow:inset 0 0 0 1px var(--sm-line)}
.sm-page .sm-segment--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sm-page .sm-segment--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.sm-page .sm-segment button{min-height:44px;padding:0 6px;border:0;border-radius:11px;background:transparent;color:var(--sm-muted);font:inherit;font-size:14.5px;font-weight:750;transition:background .15s,color .15s}
.sm-page .sm-segment button:hover{color:var(--sm-ink)}
.sm-page .sm-segment button[aria-checked="true"]{background:#fff;color:var(--sm-ink);box-shadow:0 2px 8px -4px rgba(28,24,48,.35),0 0 0 1px var(--sm-line)}
.sm-page [data-sm-voice-step] .sm-step__head + div .sm-sublabel{margin-top:0}

/* ---------- Summary (sticky on desktop) ---------- */
.sm-page .sm-summary{position:sticky;top:calc(var(--sm-stick,0px) + 104px);display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - var(--sm-stick,0px) - 120px);overflow:auto;scrollbar-width:thin;padding:16px;border-radius:24px;background:#fff;box-shadow:var(--sm-card),var(--sm-shadow)}
.sm-page .sm-cover{--g1:#dcd6ea;--g2:#f1edf7;position:relative;flex:none;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:16/10;padding:16px;border-radius:18px;background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;overflow:hidden;transition:background .35s ease}
.sm-page .sm-cover:not(.is-set){color:var(--sm-ink)}
.sm-page .sm-cover__disc{position:absolute;top:-30%;right:-16%;width:62%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,rgba(20,14,26,.9) 0 2px,rgba(40,28,48,.9) 2px 4px);box-shadow:0 20px 40px -20px rgba(0,0,0,.6);animation:sm-spin 16s linear infinite}
.sm-page .sm-cover__disc::after{content:"";position:absolute;inset:34%;border-radius:50%;background:linear-gradient(135deg,var(--g1),var(--g2));box-shadow:0 0 0 4px rgba(255,255,255,.25)}
.sm-page .sm-cover__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sm-page .sm-cover.has-img{color:#fff}
.sm-page .sm-cover.has-img::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,14,32,0) 30%,rgba(20,14,32,.8) 100%)}
.sm-page .sm-cover.has-img .sm-cover__disc{display:none}
.sm-page .sm-cover :is(.sm-cover__genre,.sm-cover__mood){position:relative;z-index:2}
.sm-page .sm-cover__genre{display:-webkit-box;overflow:hidden;font-size:22px;font-weight:900;letter-spacing:-.025em;line-height:1.2;text-shadow:0 2px 12px rgba(0,0,0,.18);-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sm-page .sm-cover__mood{margin-top:3px;font-size:13.5px;font-weight:700;opacity:.92}
html body .sm-page .sm-summary__title{overflow:hidden;font-size:18px!important;font-weight:800!important;line-height:1.35!important;letter-spacing:-.02em!important;text-overflow:ellipsis;white-space:nowrap}
.sm-page .sm-sum{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0}
.sm-page .sm-sum div{min-width:0;padding:8px 11px;border-radius:12px;background:var(--sm-cream)}
.sm-page .sm-sum dt{color:var(--sm-muted);font-size:12px;font-weight:700}
.sm-page .sm-sum dd{margin:0;overflow:hidden;color:var(--sm-ink);font-size:14px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.sm-page .sm-make{flex:none;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:0 14px;border:0;border-radius:16px;background-color:var(--sm-accent);background-image:linear-gradient(135deg,var(--sm-accent),var(--sm-accent-2));color:#fff;font:inherit;font-size:16.5px;font-weight:800;line-height:1.3;box-shadow:0 14px 28px -16px rgba(var(--sm-accent-rgb),.9);transition:transform .18s ease,filter .18s ease}
.sm-page .sm-make:hover{transform:translateY(-1px);filter:brightness(1.05)}
.sm-page .sm-make.is-waiting{background:var(--sm-ink);background-image:none;box-shadow:none}
.sm-page .sm-make:disabled{background:#e7e5ef;background-image:none;color:#8a8896;box-shadow:none;cursor:wait;transform:none}
.sm-page .sm-cost{margin:-2px 0 0;color:var(--sm-muted);font-size:12.5px;text-align:center}
.sm-page .sm-progress{padding:14px;border-radius:16px;background:var(--sm-cream);box-shadow:inset 0 0 0 1px var(--sm-line)}
.sm-page .sm-progress__steps{display:flex;gap:6px;margin:0 0 12px;padding:0;list-style:none}
.sm-page .sm-progress__steps li{flex:1;display:flex;flex-direction:column;gap:7px;color:var(--sm-muted);font-size:12.5px;font-weight:800}
.sm-page .sm-progress__steps li>span{position:relative;height:6px;border-radius:999px;background:rgba(28,24,48,.09);overflow:hidden}
.sm-page .sm-progress__steps li.is-done>span{background:var(--sm-accent)}
.sm-page .sm-progress__steps li.is-active>span::after{content:"";position:absolute;inset:0;width:45%;border-radius:inherit;background:var(--sm-accent);animation:sm-slide 1.3s ease-in-out infinite}
.sm-page .sm-progress__steps li:is(.is-done,.is-active){color:var(--sm-ink)}
.sm-page .sm-progress__steps em{font-style:normal}
.sm-page .sm-progress__text{margin:0;color:var(--sm-ink);font-size:15px;font-weight:800}
.sm-page .sm-progress__time{margin:4px 0 0;color:var(--sm-muted);font-size:12.5px}
.sm-page .sm-results{display:grid;gap:8px}
.sm-page .sm-results__title{margin:0 0 2px;color:var(--sm-ink);font-size:15.5px;font-weight:800}
.sm-page .sm-result{display:grid;grid-template-columns:52px minmax(0,1fr) 40px;align-items:center;gap:12px;width:100%;padding:8px 10px 8px 8px;border:0;border-radius:15px;background:var(--sm-cream);box-shadow:inset 0 0 0 1px var(--sm-line);color:var(--sm-ink);text-align:left;font:inherit}
.sm-page .sm-result:hover{box-shadow:inset 0 0 0 1.5px var(--sm-accent)}
.sm-page .sm-result__art img{display:block;width:52px;height:52px;border-radius:11px;object-fit:cover}
.sm-page .sm-result__copy strong{display:block;font-size:15px}
.sm-page .sm-result__copy small{display:block;overflow:hidden;color:var(--sm-muted);font-size:12.5px;text-overflow:ellipsis;white-space:nowrap}
.sm-page .sm-result__play{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sm-accent);color:#fff}
.sm-page .sm-results__links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;margin-top:4px}
.sm-page .sm-results__links a,.sm-page .sm-error a,.sm-page .sm-link{color:var(--sm-accent-ink)!important;font-size:13.5px;font-weight:800}
.sm-page .sm-error{margin:0;padding:12px 14px;border-radius:14px;background:#fff1f1;color:#b42318;font-size:14px;font-weight:600;line-height:1.55}

/* ---------- Category tabs (테마 · 키즈 · 게임·BGM · 브랜드) ---------- */
.sm-page .sm-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.sm-page .sm-modes--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sm-page .sm-mode{display:flex;align-items:center;gap:12px;min-width:0;padding:12px 14px;border:0;border-radius:18px;background:#fff;box-shadow:var(--sm-card);color:var(--sm-ink);text-align:left;font:inherit;transition:box-shadow .18s,background .18s}
.sm-page .sm-mode:hover{box-shadow:var(--sm-lift)}
.sm-page .sm-mode__icon{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;background:var(--sm-cream);font-size:22px}
.sm-page .sm-mode__copy{min-width:0}
.sm-page .sm-mode__copy strong{display:block;font-size:15.5px;line-height:1.35}
.sm-page .sm-mode__copy small{display:block;overflow:hidden;color:var(--sm-muted);font-size:12.5px;text-overflow:ellipsis;white-space:nowrap}
.sm-page .sm-mode[aria-checked="true"]{background:var(--sm-soft);box-shadow:0 0 0 2px var(--sm-accent)}
.sm-page .sm-mode[aria-checked="true"] .sm-mode__icon{background:#fff}
.sm-page .sm-groups{margin-bottom:14px}
.sm-page .sm-browser__bar{display:flex;align-items:flex-start;gap:10px 14px}
.sm-page .sm-cats{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.sm-page .sm-cat{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--sm-field);color:var(--sm-ink);font:inherit;font-size:14px;font-weight:750;white-space:nowrap;transition:background .15s,box-shadow .15s}
.sm-page .sm-cat:hover{box-shadow:inset 0 0 0 1.5px var(--sm-accent)}
.sm-page .sm-cat[aria-checked="true"]{background:var(--sm-ink);color:#fff;box-shadow:none}
.sm-page .sm-cat.has-pick::after{content:"";position:absolute;top:2px;right:4px;width:9px;height:9px;border-radius:50%;background:var(--sm-accent);box-shadow:0 0 0 2px #fff}
.sm-page .sm-search{position:relative;flex:none;display:flex;align-items:center;width:200px;color:var(--sm-muted)}
.sm-page .sm-search svg{position:absolute;left:13px;pointer-events:none}
#songMakerMain .sm-search__input{display:block;width:100%;min-height:38px;padding:7px 14px 7px 38px;border:1.5px solid var(--sm-field)!important;border-radius:999px!important;background:#fff!important;color:var(--sm-ink)!important;font-size:14px;box-shadow:none!important}
#songMakerMain .sm-search__input:focus{border-color:var(--sm-accent)!important;outline:0!important;box-shadow:0 0 0 4px rgba(var(--sm-accent-rgb),.14)!important}
.sm-page .sm-items{min-height:120px}
.sm-page .sm-sub{margin-top:20px}
html body .sm-page .sm-sub__title{display:flex;align-items:center;gap:8px;margin:0 0 10px!important;color:var(--sm-ink)!important;font-size:14.5px!important;font-weight:800!important}
html body .sm-page .sm-sub__title::before{content:"";width:4px;height:14px;border-radius:2px;background:var(--sm-accent)}
.sm-page .sm-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:10px}
.sm-page .sm-card{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0;padding:6px 6px 12px;border:0;border-radius:18px;background:#fff;box-shadow:var(--sm-card);color:var(--sm-ink);text-align:left;font:inherit;transition:transform .18s ease,box-shadow .18s ease}
.sm-page .sm-card:hover{transform:translateY(-2px);box-shadow:var(--sm-lift)}
.sm-page .sm-card__art{display:block;width:100%;aspect-ratio:4/3;border-radius:13px;overflow:hidden;background:var(--sm-cream)}
.sm-page .sm-card__art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.sm-page .sm-card__emoji{font-size:26px;line-height:1}
.sm-page .sm-card__copy{min-width:0;padding:0 6px}
.sm-page .sm-card__copy strong{display:block;overflow:hidden;font-size:15px;line-height:1.35;letter-spacing:-.02em;text-overflow:ellipsis;white-space:nowrap}
.sm-page .sm-card__copy small{display:-webkit-box;overflow:hidden;margin-top:3px;color:var(--sm-muted);font-size:12.5px;line-height:1.45;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sm-page :is(.sm-card,.sm-sfxcard,.sm-refcard)[aria-checked="true"]{background:var(--sm-soft);box-shadow:0 0 0 2px var(--sm-accent),0 16px 28px -22px rgba(var(--sm-accent-rgb),.8)}
.sm-page :is(.sm-card,.sm-sfxcard,.sm-refcard,.sm-vcard__pick)[aria-checked="true"]::after{content:"";position:absolute;top:12px;right:12px;width:24px;height:24px;border-radius:50%;box-shadow:0 0 0 2px #fff;background:var(--sm-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat}
.sm-page .sm-loading{margin:18px 0;color:var(--sm-muted);font-size:14.5px}
.sm-page .sm-results-note{margin:16px 0 8px;color:var(--sm-muted);font-size:13px;font-weight:700}
.sm-page .sm-items .sm-empty,.sm-page .sm-voices .sm-empty,.sm-page .sm-refs .sm-empty{margin-top:16px}
.sm-page .sm-retry{margin-left:6px;padding:4px 12px;border:0;border-radius:999px;background:var(--sm-soft);color:var(--sm-accent-ink);font:inherit;font-size:13.5px;font-weight:800}

/* ---------- 효과음 ---------- */
.sm-page .sm-sfx__group{margin-top:18px}
.sm-page .sm-sfx__group:first-child{margin-top:0}
.sm-page .sm-sfx__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.sm-page .sm-sfxcard{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0;padding:6px 6px 12px;border:0;border-radius:18px;background:#fff;box-shadow:var(--sm-card);color:var(--sm-ink);text-align:left;font:inherit;transition:transform .18s ease,box-shadow .18s ease}
.sm-page .sm-sfxcard:hover{transform:translateY(-2px);box-shadow:var(--sm-lift)}
.sm-page .sm-sfxcard__art{display:block;width:100%;aspect-ratio:4/3;border-radius:13px;overflow:hidden;background:var(--sm-cream)}
.sm-page .sm-sfxcard__art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.sm-page .sm-sfxcard strong{overflow:hidden;padding:0 6px;font-size:14.5px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.sm-page .sm-sfxcard small{position:absolute;top:12px;left:12px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--sm-text);font-size:11px;font-weight:800}
.sm-page .sm-sfxopts{display:grid;gap:14px;margin-top:16px;padding:16px;border-radius:16px;background:var(--sm-cream);box-shadow:inset 0 0 0 1px var(--sm-line)}
.sm-page .sm-check{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
#songMakerMain .sm-check input{flex:none;width:22px;height:22px;margin:2px 0 0;accent-color:var(--sm-accent)}
.sm-page .sm-check strong{display:block;color:var(--sm-ink);font-size:15px}
.sm-page .sm-check small{display:block;color:var(--sm-muted);font-size:12.5px;line-height:1.5}
.sm-page .sm-fieldrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px 12px}
.sm-page .sm-label.sm-label--sub{margin:0;font-size:14px;white-space:nowrap}
#songMakerMain .sm-select{min-height:44px;padding:8px 12px;font-size:15px;cursor:pointer}
#songMakerMain .sm-range{display:block;width:100%;min-height:0;margin:4px 0 0;padding:0;border:0!important;background:transparent!important;box-shadow:none!important;accent-color:var(--sm-accent);cursor:pointer}
.sm-page .sm-range__out{margin-left:auto;color:var(--sm-accent-ink);font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- 보이스 ---------- */
.sm-page .sm-voices{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:10px;margin-top:14px}
.sm-page .sm-vcard{position:relative;display:flex;flex-direction:column;border-radius:18px;background:#fff;box-shadow:var(--sm-card);transition:box-shadow .18s,transform .18s}
.sm-page .sm-vcard:hover{transform:translateY(-2px);box-shadow:var(--sm-lift)}
.sm-page .sm-vcard:has(.sm-vcard__pick[aria-checked="true"]){background:var(--sm-soft);box-shadow:0 0 0 2px var(--sm-accent),0 16px 28px -22px rgba(var(--sm-accent-rgb),.8)}
.sm-page .sm-vcard__pick{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;padding:6px 6px 8px;border:0;border-radius:18px;background:none;color:var(--sm-ink);text-align:left;font:inherit}
.sm-page .sm-vcard__art{display:block;width:100%;aspect-ratio:1;border-radius:13px;overflow:hidden;background:var(--sm-cream)}
.sm-page .sm-vcard__art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.sm-page .sm-vcard__emoji{font-size:28px;line-height:1}
.sm-page .sm-vcard__copy{min-width:0;padding:0 6px}
.sm-page .sm-vcard__copy strong{display:block;font-size:15px;line-height:1.35}
.sm-page .sm-vcard__copy small{display:block;margin-top:1px;color:var(--sm-accent-ink);font-size:12px;font-weight:800}
.sm-page .sm-vcard__copy span{display:-webkit-box;margin-top:4px;overflow:hidden;color:var(--sm-muted);font-size:12.5px;line-height:1.45;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sm-page .sm-vcard__genres{display:flex;flex-wrap:wrap;gap:4px;margin:0 12px 12px}
.sm-page .sm-vcard__genres span{padding:2px 8px;border-radius:999px;background:var(--sm-cream);color:var(--sm-muted);font-size:11.5px;font-weight:700}

/* ---------- 레퍼런스 ---------- */
.sm-page .sm-groupcopy{margin:10px 0 0;color:var(--sm-muted);font-size:13.5px}
.sm-page .sm-groupcopy:empty{display:none}
.sm-page .sm-photo-source{display:flex;justify-content:flex-end;margin:-6px 0 14px}
.sm-page .sm-photo-source .sm-link{font-size:12.5px;font-weight:700}
.sm-page .sm-refs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-auto-flow:row dense;gap:10px;margin-top:12px}
.sm-page .sm-refcard{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0;padding:6px 6px 12px;border:0;border-radius:18px;background:#fff;box-shadow:var(--sm-card);color:var(--sm-ink);text-align:left;font:inherit;transition:transform .18s ease,box-shadow .18s ease}
.sm-page .sm-refcard:hover{transform:translateY(-2px);box-shadow:var(--sm-lift)}
.sm-page .sm-refcard__art{display:block;width:100%;aspect-ratio:4/3;border-radius:13px;overflow:hidden;background:var(--sm-cream)}
.sm-page .sm-refcard__art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 25%;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.sm-page .sm-refcard__copy{min-width:0;padding:0 6px}
.sm-page .sm-refcard__copy strong{display:block;overflow:hidden;font-size:15px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.sm-page .sm-refcard__copy small{display:block;overflow:hidden;margin-top:2px;color:var(--sm-muted);font-size:12.5px;line-height:1.45;text-overflow:ellipsis;white-space:nowrap}
.sm-page .sm-refcard__copy .sm-refcard__meta{display:block;overflow:hidden;margin-top:3px;color:var(--sm-accent-ink);font-size:12.5px;font-style:normal;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.sm-page .sm-refcard__copy span{display:inline-block;margin-top:5px;padding:1px 8px;border-radius:999px;background:var(--sm-cream);color:var(--sm-text);font-size:11.5px;font-weight:700}
.sm-page .sm-admin-link{display:inline-block;margin-top:16px}
.sm-page .sm-refinfo{grid-column:1/-1;padding:16px 18px 14px;border-radius:18px;background:linear-gradient(135deg,var(--sm-soft),#fff 70%);box-shadow:inset 0 0 0 1.5px var(--sm-soft-2);animation:sm-rise .24s ease-out}
.sm-page .sm-refinfo__head{margin:0 0 12px;color:var(--sm-text);font-size:14px;line-height:1.45}
.sm-page .sm-refinfo__head strong{color:var(--sm-ink);font-weight:800}
.sm-page .sm-refinfo__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.sm-page .sm-refinfo__facts span{display:flex;flex-direction:column;gap:3px;min-width:0;padding:10px 12px;border-radius:13px;background:#fff;box-shadow:inset 0 0 0 1px var(--sm-line)}
.sm-page .sm-refinfo__facts small{color:var(--sm-muted);font-size:11.5px;font-weight:600}
.sm-page .sm-refinfo__facts b{color:var(--sm-ink);font-size:14px;font-weight:800;line-height:1.35;word-break:keep-all}
.sm-page .sm-refinfo__traits{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.sm-page .sm-refinfo__traits li{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--sm-line);color:var(--sm-ink);font-size:13px;font-weight:700}
.sm-page .sm-refinfo__traits li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sm-accent)}
.sm-page .sm-refinfo__note{margin:10px 0 0;color:var(--sm-muted);font-size:12px;line-height:1.5}

/* ---------- Recent and other ways ---------- */
.sm-page .sm-section{margin-top:44px}
.sm-page .sm-section__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 20px;margin-bottom:14px}
html body .sm-page .sm-section__head h2{margin-top:4px!important;font-size:21px!important;font-weight:800!important;letter-spacing:-.025em!important}
.sm-page .sm-recent{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.sm-page .sm-track{display:flex;flex-direction:column;gap:3px;padding:0;border:0;background:none;color:var(--sm-ink);text-align:left;font:inherit;min-width:0}
.sm-page .sm-track__art{position:relative;display:block;aspect-ratio:1;border-radius:18px;overflow:hidden;background:#eee;box-shadow:0 14px 28px -22px rgba(28,24,48,.6)}
.sm-page .sm-track__art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.sm-page .sm-track:hover .sm-track__art img{transform:scale(1.05)}
.sm-page .sm-track__play{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--sm-ink);box-shadow:0 8px 18px -8px rgba(0,0,0,.5)}
.sm-page .sm-track strong{margin-top:8px;overflow:hidden;font-size:15px;text-overflow:ellipsis;white-space:nowrap}
.sm-page .sm-track small{overflow:hidden;color:var(--sm-muted);font-size:12.5px;text-overflow:ellipsis;white-space:nowrap}
.sm-page .sm-empty{grid-column:1 / -1;margin:0;padding:20px;border-radius:18px;background:#fff;box-shadow:var(--sm-card);color:var(--sm-muted)}
.sm-page .sm-empty strong{color:var(--sm-ink)}
.sm-page .sm-other__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sm-page .sm-other__grid a{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:18px;background:#fff;box-shadow:var(--sm-card);color:var(--sm-ink)!important;text-decoration:none!important;transition:transform .18s ease,box-shadow .18s ease}
.sm-page .sm-other__grid a:hover{transform:translateY(-2px);box-shadow:var(--sm-lift)}
.sm-page .sm-other__grid strong{font-size:15.5px}
.sm-page .sm-other__grid span{color:var(--sm-muted);font-size:13px;line-height:1.45}

/* ---------- Floating dock (phones and tablets) ---------- */
.sm-page .sm-dock{display:none}

@keyframes sm-spin{to{transform:rotate(360deg)}}
@keyframes sm-slide{0%{transform:translateX(-110%)}100%{transform:translateX(240%)}}
@keyframes sm-rise{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sm-page *{animation:none!important;transition:none!important}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .sm-page .sm-genre:hover .sm-genre__art img,
  .sm-page .sm-card:hover .sm-card__art img,
  .sm-page .sm-sfxcard:hover .sm-sfxcard__art img,
  .sm-page .sm-vcard__pick:hover .sm-vcard__art img,
  .sm-page .sm-refcard:hover .sm-refcard__art img{transform:scale(1.04)}
}
.sm-page :is(.sm-genre,.sm-card,.sm-sfxcard,.sm-refcard,.sm-vcard__pick):active{transform:scale(.985)}

/* ---------- Tablet: summary under the steps, dock on ---------- */
@media (max-width:1020px){
  .sm-page{padding-bottom:190px}
  .sm-page .sm-layout{grid-template-columns:minmax(0,1fr)}
  .sm-page .sm-summary{position:static;max-height:none;overflow:visible;scroll-margin-top:calc(var(--sm-stick,0px) + 96px)}
  .sm-page .sm-cover{aspect-ratio:2.4}
  .sm-page .sm-dock{position:fixed;left:12px;right:12px;bottom:calc(var(--sm-dock-bottom,64px) + 10px);z-index:40;display:flex;align-items:center;gap:10px;max-width:640px;margin:0 auto;padding:8px;border-radius:20px;background:rgba(28,27,34,.95);color:#fff;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 18px 40px -16px rgba(20,14,40,.55);transition:transform .28s cubic-bezier(.32,.72,0,1),opacity .2s}
  .sm-page .sm-dock.is-away{transform:translateY(18px);opacity:0;pointer-events:none}
  .sm-page .sm-dock__info{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:0;border:0;background:none;color:inherit;text-align:left;font:inherit}
  .sm-page .sm-dock__art{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,var(--g1,var(--sm-accent)),var(--g2,var(--sm-accent-2)));color:#fff}
  .sm-page .sm-dock__art img{display:block;width:100%;height:100%;object-fit:cover}
  .sm-page .sm-dock__text{min-width:0}
  .sm-page .sm-dock__text strong{display:block;overflow:hidden;font-size:14.5px;font-weight:800;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
  .sm-page .sm-dock__text small{display:block;overflow:hidden;color:rgba(255,255,255,.72);font-size:12px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
  .sm-page .sm-dock__make{flex:none;display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:0 10px 0 16px;border:0;border-radius:14px;background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:14.5px;font-weight:800;white-space:nowrap}
  .sm-page .sm-dock.is-ready .sm-dock__make{background-color:var(--sm-accent);background-image:linear-gradient(135deg,var(--sm-accent),var(--sm-accent-2));box-shadow:0 10px 20px -10px rgba(var(--sm-accent-rgb),.9)}
  .sm-page .sm-dock.is-busy .sm-dock__make svg{display:none}
}
@media (max-width:760px){
  .sm-page .sm-browser__bar{flex-direction:column;align-items:stretch}
  .sm-page .sm-search{order:-1;width:100%}
}

/* ---------- Phone ---------- */
@media (max-width:640px){
  .sm-page{--sm-pad:16px;padding:14px 16px 190px;font-size:15.5px}
  html body .sm-page .sm-title{font-size:24px!important}
  .sm-page .sm-title br{display:inline}
  .sm-page .sm-lede{font-size:14px}
  .sm-page .sm-head{gap:12px}
  .sm-page .sm-wallet{width:100%;padding:8px 8px 8px 14px;border-radius:16px}
  .sm-page .sm-wallet__value{font-size:18px}
  .sm-page .sm-tabs{padding:10px 16px 8px;margin-bottom:12px}
  .sm-page .sm-tabs__list{padding:4px;border-radius:16px}
  .sm-page .sm-tab{flex:none;min-height:42px;padding:0 12px 0 6px;font-size:14px;gap:6px}
  .sm-page .sm-tab__icon{width:28px;height:28px;border-radius:9px}
  .sm-page .sm-tab__icon svg{width:16px;height:16px}
  .sm-page .sm-tabhint{display:none}
  .sm-page .sm-step{padding:18px 16px;border-radius:20px}
  .sm-page .sm-step__head{margin-bottom:14px}
  html body .sm-page .sm-step__head h2{font-size:17.5px!important}
  .sm-page .sm-step__head p{font-size:13px}
  .sm-page .sm-step__pick{order:3;max-width:none;margin-left:44px;padding:5px 11px;font-size:12.5px}
  /* 장르: three compact columns */
  .sm-page .sm-genres{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .sm-page .sm-genre{padding:4px 4px 9px;border-radius:15px}
  .sm-page .sm-genre__art{aspect-ratio:1;margin-bottom:6px;border-radius:11px}
  .sm-page .sm-genre__name{padding:0 4px;font-size:14px;text-align:center}
  .sm-page .sm-genre__desc{display:none}
  .sm-page .sm-genre[aria-checked="true"]::after{top:8px;right:8px;width:20px;height:20px;background-size:12px}
  .sm-page .sm-moods{padding:12px}
  .sm-page .sm-chip{min-height:40px;padding:0 15px;font-size:14.5px}
  /* Category tabs: chips scroll sideways, each sub-section is a swipe row */
  .sm-page .sm-modes,.sm-page .sm-modes--3{grid-template-columns:1fr;gap:8px}
  .sm-page .sm-mode{padding:10px 12px}
  .sm-page .sm-segment--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sm-page .sm-segment--4 button{font-size:13.5px;padding:0 2px}
  .sm-page .sm-segment--5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm-page .sm-cats{flex-wrap:nowrap;margin:0 -16px;padding:2px 16px 4px;overflow-x:auto;scrollbar-width:none;scroll-padding-inline:16px}
  .sm-page .sm-cats::-webkit-scrollbar{display:none}
  .sm-page .sm-cat{min-height:36px;padding:0 13px;font-size:13.5px}
  .sm-page .sm-sub{margin-top:16px}
  .sm-page .sm-sub .sm-cards{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 16px) / 2.35);gap:8px;margin:0 -16px;padding:2px 16px 8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none}
  .sm-page .sm-sub .sm-cards::-webkit-scrollbar{display:none}
  .sm-page .sm-sub .sm-card{scroll-snap-align:start}
  .sm-page .sm-cards,.sm-page .sm-refs,.sm-page .sm-voices,.sm-page .sm-sfx__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .sm-page .sm-sfx__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm-page .sm-sfxcard{padding:4px 4px 9px;border-radius:15px}
  .sm-page .sm-sfxcard__art{aspect-ratio:1;border-radius:11px}
  .sm-page .sm-sfxcard strong{font-size:13px;text-align:center}
  .sm-page .sm-sfxcard small{top:8px;left:8px;font-size:10px;padding:2px 6px}
  .sm-page .sm-card,.sm-page .sm-refcard{padding:5px 5px 10px;gap:7px;border-radius:16px}
  .sm-page .sm-card__art,.sm-page .sm-refcard__art{border-radius:11px}
  .sm-page .sm-card__copy,.sm-page .sm-refcard__copy,.sm-page .sm-vcard__copy{padding:0 4px}
  .sm-page .sm-card__copy strong,.sm-page .sm-refcard__copy strong{font-size:14px}
  .sm-page .sm-card__copy small{font-size:12px}
  .sm-page .sm-vcard__pick{padding:5px;gap:7px}
  .sm-page .sm-vcard__copy strong{font-size:14px}
  .sm-page .sm-vcard__copy small{font-size:11.5px}
  .sm-page .sm-vcard__copy span{font-size:12px;-webkit-line-clamp:2}
  .sm-page .sm-vcard__genres{margin:2px 9px 10px;gap:3px}
  .sm-page .sm-vcard__genres span{padding:2px 6px;font-size:10.5px}
  .sm-page :is(.sm-card,.sm-sfxcard,.sm-refcard,.sm-vcard__pick)[aria-checked="true"]::after{top:9px;right:9px;width:20px;height:20px;background-size:12px}
  .sm-page .sm-fieldrow{grid-template-columns:auto minmax(0,1fr)}
  .sm-page .sm-other__grid{grid-template-columns:1fr}
  .sm-page .sm-recent{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm-page .sm-cover{aspect-ratio:2}
  .sm-page .sm-section{margin-top:36px}
}


/* 2026-10-13: the seven creation methods and their inner category menus. */
#songMakerMain { --sm-nav-clearance: 128px; --sm-menu-muted: #6e6a79; }
#songMakerMain .sm-tabs {
  padding-top: 8px;
  padding-bottom: 8px;
  background: var(--sm-bg);
  transition: border-color .16s ease;
}
#songMakerMain .sm-tabs.is-stuck {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 1px 0 var(--sm-line);
}
#songMakerMain .sm-tabs__list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
#songMakerMain .sm-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
  min-height: 78px;
  height: 78px;
  padding: 7px 7px 8px;
  border: 1px solid var(--sm-line);
  border-radius: 13px;
  background: #fff;
  background-image: none;
  color: var(--sm-ink);
  box-shadow: none;
  text-align: center;
  white-space: normal;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
#songMakerMain .sm-tab:hover { border-color: #c7c2d2; background: #fcfbfe; color: var(--sm-ink); }
#songMakerMain .sm-tab__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 8px;
  background: transparent;
  color: #81768f;
  box-shadow: none;
}
#songMakerMain .sm-tab__icon svg { width: 22px; height: 22px; stroke-width: 1.9; }
#songMakerMain .sm-tab__icon::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: var(--sm-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 9px no-repeat;
  opacity: 0;
  transition: opacity .16s ease;
}
#songMakerMain .sm-tab__copy { display: flex; flex-direction: column; gap: 2px; width: 100%; min-width: 0; }
#songMakerMain .sm-tab__label { display: block; width: 100%; min-width: 0; overflow: hidden; color: inherit; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
#songMakerMain .sm-tab__desc { display: block; width: 100%; min-width: 0; margin: 0; overflow: hidden; color: var(--sm-menu-muted); font-size: 12px; font-weight: 400; line-height: 15px; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
#songMakerMain .sm-tab::before { content: ""; position: absolute; right: 14px; bottom: 0; left: 14px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; }
#songMakerMain .sm-tab[aria-selected="true"] { border-color: var(--sm-accent); background: var(--sm-soft); background-image: none; color: var(--sm-accent-ink); box-shadow: none; }
#songMakerMain .sm-tab[aria-selected="true"]::before { background: var(--sm-accent); }
#songMakerMain .sm-tab[aria-selected="true"] .sm-tab__icon { background: transparent; color: var(--sm-accent-ink); }
#songMakerMain .sm-tab[aria-selected="true"] .sm-tab__icon::after { opacity: 1; }
#songMakerMain .sm-tab__badge { position: absolute; top: 5px; right: 5px; padding: 1px 5px; border: 1px solid var(--sm-line); border-radius: 5px; background: #f1eff6; color: var(--sm-menu-muted); font-size: 9px; font-weight: 600; line-height: 13px; }
#songMakerMain .sm-tabhint { gap: 7px; margin: 8px 1px 0; color: var(--sm-menu-muted); font-size: 12px; font-weight: 400; line-height: 17px; }
#songMakerMain .sm-tabhint::before { width: 4px; height: 4px; background: var(--sm-accent); }

/* Type cards are kept distinct from the individual artwork choices below them. */
#songMakerMain .sm-segment.sm-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
#songMakerMain .sm-groups .sm-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 68px;
  padding: 10px 9px;
  border: 1px solid var(--sm-line);
  border-radius: 12px;
  background: #fff;
  color: var(--sm-ink);
  text-align: left;
  box-shadow: none;
  transition: border-color .16s ease, background-color .16s ease;
}
#songMakerMain .sm-group__icon { display: grid; place-items: center; flex: none; width: 26px; height: 28px; border-radius: 8px; background: transparent; color: #81768f; }
#songMakerMain .sm-group__icon svg { width: 22px; height: 22px; stroke-width: 1.9; }
#songMakerMain .sm-group__copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#songMakerMain .sm-group__label { display: block; min-width: 0; overflow: hidden; color: inherit; font-size: 14px; font-weight: 700; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
#songMakerMain .sm-group__desc { display: block; min-width: 0; overflow: hidden; color: var(--sm-menu-muted); font-size: 11px; font-weight: 400; line-height: 15px; text-overflow: ellipsis; white-space: nowrap; }
#songMakerMain .sm-groups .sm-group:hover { border-color: #c7c2d2; background: #fcfbfe; }
#songMakerMain .sm-groups .sm-group[aria-checked="true"] { border-color: var(--sm-accent); background: var(--sm-soft); color: var(--sm-accent-ink); box-shadow: inset 2px 0 0 var(--sm-accent); }
#songMakerMain .sm-group[aria-checked="true"] .sm-group__icon { color: var(--sm-accent-ink); }

#songMakerMain .sm-modes { gap: 8px; margin-bottom: 16px; }
#songMakerMain .sm-modes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#songMakerMain .sm-mode { min-height: 84px; gap: 9px; padding: 11px 10px; border: 1px solid var(--sm-line); border-radius: 13px; background: #fff; box-shadow: none; }
#songMakerMain .sm-mode:hover { border-color: #c7c2d2; background: #fcfbfe; box-shadow: none; }
#songMakerMain .sm-mode__icon { width: 32px; height: 36px; border-radius: 9px; background: transparent; color: #81768f; }
#songMakerMain .sm-mode__icon svg { width: 26px; height: 26px; stroke-width: 1.9; }
#songMakerMain .sm-mode__copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#songMakerMain .sm-mode__copy > strong { display: block; min-width: 0; overflow: hidden; color: inherit; font-size: 14px; font-weight: 700; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
#songMakerMain .sm-mode__desc { display: block; min-width: 0; overflow: hidden; color: var(--sm-menu-muted); font-size: 11px; font-weight: 400; line-height: 15px; text-overflow: ellipsis; white-space: nowrap; }
#songMakerMain .sm-mode__copy .sm-mode__cost { display: block; margin-top: 1px; color: var(--sm-menu-muted); font-size: 11px; font-weight: 600; line-height: 14px; }
#songMakerMain .sm-mode[aria-checked="true"] { border-color: var(--sm-accent); background: var(--sm-soft); box-shadow: inset 2px 0 0 var(--sm-accent); }
#songMakerMain .sm-mode[aria-checked="true"] .sm-mode__icon { background: transparent; color: var(--sm-accent-ink); }

#songMakerMain .sm-cats { gap: 7px; }
#songMakerMain .sm-cat { flex: 0 0 auto; min-height: 42px; min-width: 0; gap: 8px; padding: 7px 10px; border: 1px solid var(--sm-field); border-radius: 9px; background: #fff; color: var(--sm-ink); font-size: 13px; font-weight: 600; line-height: 18px; box-shadow: none; }
#songMakerMain .sm-cat:hover { border-color: #bfb8cc; background: #fcfbfe; box-shadow: none; }
#songMakerMain .sm-cat__label { min-width: 0; line-height: 18px; }
#songMakerMain .sm-cat__count { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 5px; background: #f1eff6; color: var(--sm-menu-muted); font-size: 10px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
#songMakerMain .sm-cat[aria-checked="true"] { border-color: var(--sm-accent); background: var(--sm-soft); color: var(--sm-accent-ink); box-shadow: inset 0 -1px 0 var(--sm-accent); }
#songMakerMain .sm-cat[aria-checked="true"] .sm-cat__count { background: #fff; color: var(--sm-accent-ink); }
#songMakerMain .sm-cat.has-pick::after { width: 6px; height: 6px; top: 3px; right: 3px; box-shadow: none; }
#songMakerMain .sm-browser__bar { gap: 10px 12px; margin-bottom: 4px; }

/* Keep existing radiogroup behaviour for mood, voice character and genre refinements. */
#songMakerMain .sm-chips { gap: 7px; }
#songMakerMain .sm-chip { min-height: 40px; padding: 6px 13px; border: 1px solid var(--sm-field); border-radius: 9px; background: #fff; color: var(--sm-ink); font-size: 13px; font-weight: 600; line-height: 20px; box-shadow: none; }
#songMakerMain .sm-chip:hover { border-color: #bfb8cc; background: #fcfbfe; box-shadow: none; }
#songMakerMain .sm-chip[aria-checked="true"] { border-color: var(--sm-accent); background: var(--sm-soft); color: var(--sm-accent-ink); box-shadow: inset 0 -1px 0 var(--sm-accent); }
#songMakerMain .sm-segment:not(.sm-groups) { gap: 5px; padding: 5px; border-radius: 12px; background: #f6f5f9; box-shadow: inset 0 0 0 1px var(--sm-line); }
#songMakerMain .sm-segment:not(.sm-groups) button { border: 1px solid transparent; border-radius: 9px; font-size: 13px; font-weight: 600; }
#songMakerMain .sm-segment:not(.sm-groups) button[aria-checked="true"] { border-color: var(--sm-accent); background: #fff; color: var(--sm-accent-ink); box-shadow: none; }
#songMakerMain :is(.sm-tab,.sm-group,.sm-mode,.sm-cat,.sm-chip,.sm-segment button):focus-visible { outline: 2px solid var(--sm-accent) !important; outline-offset: -3px; box-shadow: none; }
#songMakerMain :is(.sm-tab,.sm-group,.sm-mode,.sm-cat,.sm-chip):disabled { opacity: .5; cursor: not-allowed; }
#songMakerMain :is(.sm-step,.sm-input,.sm-moods,.sm-summary,.sm-progress,.sm-results) { scroll-margin-top: calc(var(--sm-stick, 0px) + var(--sm-nav-clearance) + 12px); }

@media (min-width: 1021px) {
  #songMakerMain .sm-summary { top: calc(var(--sm-stick, 0px) + var(--sm-nav-clearance)); max-height: calc(100vh - var(--sm-stick, 0px) - var(--sm-nav-clearance) - 16px); }
}
@media (max-width: 1200px) and (min-width: 1024px) {
  #songMakerMain .sm-tabs__list { gap: 6px; }
  #songMakerMain .sm-tab { padding-inline: 4px; }
}
@media (max-width: 1023px) {
  #songMakerMain { --sm-nav-clearance: 144px; }
  #songMakerMain .sm-tabs__list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 132px;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 1px;
    padding: 1px 1px 5px;
    scrollbar-width: thin;
    scrollbar-color: #c8c1d3 transparent;
    -webkit-overflow-scrolling: touch;
  }
  #songMakerMain .sm-tabs__list::-webkit-scrollbar { display: block; height: 4px; }
  #songMakerMain .sm-tabs__list::-webkit-scrollbar-track { background: transparent; }
  #songMakerMain .sm-tabs__list::-webkit-scrollbar-thumb { border-radius: 4px; background: #c8c1d3; }
  #songMakerMain .sm-tab { width: 132px; height: 78px; min-height: 78px; scroll-snap-align: start; }
  #songMakerMain .sm-tab__desc { font-size: 12px; }
  #songMakerMain .sm-tabhint { font-size: 12px; }
}
@media (max-width: 720px) {
  #songMakerMain .sm-segment.sm-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  #songMakerMain .sm-modes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #songMakerMain .sm-mode { flex-direction: column; justify-content: flex-start; align-items: center; gap: 4px; min-height: 104px; padding: 7px 6px; text-align: center; }
  #songMakerMain .sm-mode__icon { width: 22px; height: 22px; }
  #songMakerMain .sm-mode__icon svg { width: 22px; height: 22px; }
  #songMakerMain .sm-mode__copy { gap: 2px; width: 100%; align-items: center; }
  #songMakerMain .sm-mode__copy > strong { max-width: 100%; font-size: 13px; line-height: 17px; }
  #songMakerMain .sm-mode__desc { display: -webkit-box; width: 100%; max-width: 100%; min-height: 26px; overflow: hidden; font-size: 11px; line-height: 13px; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  #songMakerMain .sm-mode__copy .sm-mode__cost { max-width: 100%; font-size: 10px; line-height: 12px; }
  #songMakerMain .sm-groups .sm-group { min-height: 64px; padding: 9px 10px; }
  #songMakerMain .sm-group__desc { font-size: 11px; }
  #songMakerMain .sm-cat { min-height: 40px; gap: 6px; padding: 6px 9px; font-size: 12px; }
  #songMakerMain .sm-cat__count { height: 20px; min-width: 20px; font-size: 10px; }
  #songMakerMain .sm-chip { min-height: 40px; padding-inline: 11px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #songMakerMain :is(.sm-tabs,.sm-tab,.sm-tab__icon,.sm-tab__icon::after,.sm-group,.sm-mode,.sm-cat,.sm-chip) { transition: none; }
  #songMakerMain .sm-tabs__list { scroll-behavior: auto; }
}