/* ============================================================
   에아이 아카데미 · 수강생 도구 공통 디자인 시스템 (tools.css)
   - 모듈러 스케일 1.2 / 8pt 간격 / 역할별 줄간격
   - ai-setup · ai-memory · ai-image · ai-typo 공통
   ============================================================ */
:root{
  /* color */
  --bg:#ffffff; --ink:#141416; --sub:#8a8a90;
  --red:#E60012; --red-d:#c30010; --tint:#fff5f5;
  --line:#e9e9ec; --fill:#f6f6f7; --ok:#1a8f4a;
  /* type scale (1.2 · base 17) */
  --fs-hero:clamp(31px,5.5vw,42px);
  --fs-h2:24px; --fs-q:20px; --fs-lead:19px;
  --fs-body:17px; --fs-sm:15px; --fs-xs:13px;
  --fs-cap:12.5px; --fs-label:12px;
  /* line-height (역할별 고정) */
  --lh-hero:1.18; --lh-tight:1.2; --lh-lead:1.5;
  --lh-body:1.65; --lh-loose:1.8;
  /* letter-spacing */
  --ls-hero:-.03em; --ls-h:-.02em; --ls-body:-.01em;
  --ls-caps:.14em; --ls-cap:.05em;
  /* spacing (8pt) */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:40px; --sp-6:48px; --sp-7:64px;
  /* radius */
  --r-1:12px; --r-2:16px; --r-3:20px;
}
*{box-sizing:border-box;margin:0;padding:0;word-break:keep-all;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:'Pretendard Variable',Pretendard,-apple-system,sans-serif;
  color:var(--ink);background:var(--bg);
  font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);
  font-weight:400;-webkit-font-smoothing:antialiased;padding-bottom:var(--sp-4);
}

/* header */
header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:15px 22px;background:rgba(255,255,255,.85);backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line)}
header img{height:20px}
header .tag{font-size:var(--fs-label);font-weight:800;letter-spacing:.13em;color:var(--red)}

/* layout */
main{max-width:780px;margin:0 auto;padding:var(--sp-6) var(--sp-2) var(--sp-5)}

/* hero */
.kick{display:inline-block;font-size:var(--fs-label);font-weight:800;letter-spacing:var(--ls-caps);
  color:var(--red);margin-bottom:var(--sp-2)}
h1{font-size:var(--fs-hero);font-weight:800;line-height:var(--lh-hero);letter-spacing:var(--ls-hero)}
.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-body);
  color:var(--ink);margin-top:var(--sp-2);max-width:30em}

/* block rhythm */
.block{margin-top:52px}
.qlabel{font-size:var(--fs-q);font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--ls-h);
  margin-bottom:8px}
.qlabel .opt{font-size:var(--fs-sm);font-weight:400;color:var(--sub);margin-left:6px;letter-spacing:0}
.hint{font-size:var(--fs-sm);color:var(--sub);line-height:var(--lh-body);margin:0 0 18px}
/* 타이틀 바로 뒤에 박스가 오면(안내 없음) 숨통 확보 → 어디서나 텍스트↔박스 18px */
.qlabel + .tabs,.qlabel + .chips,.qlabel + input[type=text],.qlabel + #poLayout{margin-top:10px}

/* tabs / chips */
.tabs{display:flex;flex-wrap:wrap;gap:9px}
.tab{font-family:inherit;font-size:16px;font-weight:400;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:var(--r-1);padding:12px 18px;cursor:pointer;transition:.14s}
.tab:hover{border-color:#cacace}
.tab.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:11px}
.chip{font-family:inherit;font-size:16px;font-weight:400;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:var(--r-1);padding:12px 17px;cursor:pointer;transition:.14s}
.chip:hover{border-color:#cacace}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
[data-group="goal"] .chip.on{background:var(--red);border-color:var(--red)}

/* emoji tile grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:11px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  min-height:96px;padding:16px 8px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-2);
  cursor:pointer;transition:.14s}
.tile:hover{border-color:#cacace}
.tile:active{transform:scale(.97)}
.tile .emo{font-size:27px;line-height:1}
.tile .lbl{font-size:var(--fs-xs);font-weight:400;text-align:center;line-height:1.25}
.tile.on{border-color:var(--red);background:var(--tint)}
.tile.on .lbl{font-weight:700;color:var(--red)}
.tile .chk{position:absolute;top:7px;right:7px;width:19px;height:19px;border-radius:50%;
  background:var(--red);color:#fff;font-size:11px;font-weight:800;display:none;
  align-items:center;justify-content:center}
.tile.on .chk{display:flex}

/* numbered sections (memory) */
.sec{margin-top:var(--sp-6)}
.sec-head{display:flex;align-items:baseline;gap:10px;margin-bottom:var(--sp-2)}
.sec-head .no{font-size:var(--fs-xs);font-weight:800;color:var(--red)}
.sec-head .q{font-size:var(--fs-q);font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--ls-h)}
.sec-head .opt{font-size:var(--fs-cap);font-weight:700;color:var(--red)}

/* text input */
input[type=text]{width:100%;font-family:inherit;font-size:17px;padding:15px 16px;
  border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink)}
input[type=text]:focus{outline:none;border-color:var(--ink)}
input[type=text]::placeholder{color:#bcbcc2}
textarea.field{width:100%;font-family:inherit;font-size:17px;line-height:1.65;padding:14px 16px;
  border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);
  resize:vertical;min-height:88px}
textarea.field:focus{outline:none;border-color:var(--ink)}
textarea.field::placeholder{color:#bcbcc2}
.qlabel + textarea.field{margin-top:10px}

/* 결과 방향 선택 (무료 1방향 / 유료 여러방향·준비중 잠금) */
.dirsel{display:flex;flex-wrap:wrap;gap:11px;margin-top:var(--sp-4)}
.dirbtn{flex:1 1 0;min-width:150px;font-family:inherit;font-size:16px;font-weight:700;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-1);padding:14px 16px;cursor:pointer;
  transition:.14s;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;line-height:var(--lh-tight)}
.dirbtn:hover{border-color:#cacace}
.dirbtn.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:800}
.dirbtn.lock{border-style:dashed}
.dirbtn.lock.on{background:var(--red);border-color:var(--red);border-style:solid}
.dirtag{font-size:var(--fs-cap);font-weight:800;letter-spacing:.02em;padding:3px 9px;border-radius:999px;
  background:var(--fill);color:var(--ink)}
.dirbtn.on .dirtag{background:rgba(255,255,255,.22);color:#fff}
.dirbtn.lock .dirtag{background:var(--tint);color:var(--red)}
.dirbtn.lock.on .dirtag{background:rgba(255,255,255,.22);color:#fff}
.dirnote{margin-top:var(--sp-2);padding:13px 16px;background:var(--tint);border-radius:var(--r-1);
  font-size:var(--fs-sm);font-weight:700;color:var(--red);line-height:var(--lh-lead)}

/* 개인정보 보호 경고 (공용) */
.privacy{margin:var(--sp-3) 0;padding:14px 16px;background:var(--tint);
  border:1.5px solid var(--red);border-radius:var(--r-1);
  font-size:var(--fs-sm);line-height:var(--lh-lead);color:var(--ink)}
.privacy .pt{display:block;font-weight:800;color:var(--red);margin-bottom:5px}
.privacy b{color:var(--red);font-weight:700}

/* primary action */
.make{display:block;width:100%;font-family:inherit;font-size:18px;font-weight:800;color:#fff;
  background:var(--red);border:none;border-radius:var(--r-2);padding:19px;margin-top:var(--sp-4);
  cursor:pointer;transition:.14s}
.make:hover{background:var(--red-d)}
.make:active{transform:scale(.99)}
.make .cnt{font-weight:400;opacity:.85;margin-left:8px;font-size:16px}
.warn-red{margin-top:var(--sp-2);text-align:center;font-size:var(--fs-sm);color:var(--red);
  font-weight:700;line-height:1.5}

/* poster copy fields (ai-image · design) */
.pfield{margin-top:18px}
.pfield>label{display:block;font-size:15px;font-weight:700;margin-bottom:8px}
.pfield .opt{font-size:13px;font-weight:400;color:var(--sub);margin-left:6px;letter-spacing:0}
.pBody{margin-top:8px}
#pBodyWrap .pBody:first-child{margin-top:0}
#pInfoInputs input{margin-top:8px}
.addbtn{margin-top:10px;font-family:inherit;font-size:14.5px;font-weight:700;color:var(--ink);
  background:#fff;border:1.5px dashed var(--line);border-radius:var(--r-1);padding:10px 16px;
  cursor:pointer;transition:.14s}
.addbtn:hover{border-color:var(--ink)}

/* 3x3 position picker (도화지 위치 지정) */
.posgrid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:6px;
  aspect-ratio:4/3;max-width:280px;margin-top:12px;padding:6px;background:var(--fill);
  border:1.5px solid var(--line);border-radius:var(--r-2)}
.poscell{border:1.5px dashed #d3d3d8;border-radius:9px;background:#fff;cursor:pointer;transition:.12s;
  display:flex;align-items:center;justify-content:center}
.poscell::before{content:"";width:7px;height:7px;border-radius:50%;background:#d3d3d8;transition:.12s}
.poscell:hover{border-color:#adadb4}
.poscell:hover::before{background:#adadb4}
.poscell.on{background:var(--red);border-style:solid;border-color:var(--red)}
.poscell.on::before{background:#fff;transform:scale(1.25)}
.posgrid.sm{max-width:156px;aspect-ratio:3/2;gap:4px;padding:5px;margin-top:6px}
.posgrid.sm .poscell{border-radius:6px}
.posgrid.sm .poscell::before{width:5px;height:5px}
.prow{margin-top:14px}
.prow:first-child{margin-top:0}
.poslabel{font-size:12.5px;color:var(--sub);margin-top:8px}

/* layout designer (layout.js) */
.mini{font-size:15px;font-weight:800;color:var(--ink);margin:36px 0 16px;letter-spacing:-.01em}
.layset{border:1.5px solid var(--line);border-radius:var(--r-1);background:#fff;margin:8px 0 4px}
.layset-sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:15px 16px;font-size:16px;font-weight:800;color:var(--ink);user-select:none}
.layset-sum::-webkit-details-marker{display:none}
.layset-badge{background:var(--fill);color:var(--ink);font-weight:700;font-size:14px;padding:4px 10px;border-radius:8px;white-space:nowrap}
.layset-arw{margin-left:auto;font-size:12px;color:var(--ink);transition:transform .18s}
.layset[open] .layset-arw{transform:rotate(180deg)}
.layset[open] .layset-sum{border-bottom:1px solid var(--line)}
.layset-body{padding:6px 16px 22px}
.layset-body .mini:first-child{margin-top:14px}
.lay-elhd{margin-top:38px}
.lay-add{margin-top:24px}
.lay-info{margin-top:18px}
.laydl{margin-top:24px}
.laytoolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.stepper{display:inline-flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:var(--r-1);padding:6px 12px;font-size:15px;font-weight:700}
.stepper button{width:28px;height:28px;border:none;background:var(--fill);border-radius:8px;font-size:18px;font-weight:800;cursor:pointer;color:var(--ink)}
.stepper button:hover{background:#ececee}
.ratioIn{width:58px;font-family:inherit;font-size:15px;padding:8px;border:1.5px solid var(--line);border-radius:9px;text-align:center}
.lay-cust{font-size:14px;color:var(--sub);display:inline-flex;align-items:center;gap:6px}
.lay-orient{cursor:pointer;align-self:stretch}
/* 비율 버튼 — 대지 모양 미리보기 + 비율 숫자 */
.lay-ratio{display:flex;flex-wrap:wrap;gap:10px}
.ratiobtn{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;width:58px;padding:11px 6px 9px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;transition:.14s}
.ratiobtn:hover{border-color:#cacace}
.ratiobtn.on{border-color:var(--red);background:var(--tint)}
.ratiobox{display:flex;align-items:center;justify-content:center;width:34px;height:34px}
.ratioshape{border:1.6px solid var(--sub);border-radius:3px;background:var(--fill)}
.ratiobtn.on .ratioshape{border-color:var(--red);background:#fff}
.ratiolabel{font-size:12px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
/* 색상 파라미터 (colors.js) — 역할별 팔레트 */
.coledit{margin-top:14px}
.colroles{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.colrole{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff}
.colrole-nm{font-size:14px;font-weight:700;color:var(--ink);width:48px;flex:none}
.colrole-nmin{border:1.5px solid var(--line);border-radius:7px;padding:5px 7px;width:70px;font-family:inherit;outline:none}
.colrole input[type=color]{width:32px;height:32px;border:none;background:none;padding:0;cursor:pointer;flex:none}
.colrole input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.colrole input[type=color]::-webkit-color-swatch{border:1px solid var(--line);border-radius:7px}
.colhex{flex:1;min-width:0;font-family:inherit;font-size:14px;font-weight:600;border:none;outline:none;text-transform:uppercase;color:var(--ink);background:none}
.colrm{flex:none;width:26px;height:26px;border:none;background:var(--fill);border-radius:7px;font-size:15px;line-height:1;cursor:pointer;color:var(--sub)}
.colrm:hover{color:var(--red)}
/* 스타일 카테고리 라이브러리 */
.stylelib{margin-top:16px}
.stylecats{display:flex;flex-wrap:wrap;gap:11px}
.stylecat-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.stylecat-tab{font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);background:var(--fill);border:1.5px solid transparent;border-radius:999px;padding:9px 15px;cursor:pointer;transition:.14s}
.stylecat-tab:hover{border-color:var(--line)}
.stylecat-tab.on{background:var(--red);color:#fff}
.stylecat-styles{margin-top:16px}
.stylefeel{margin-top:14px;background:var(--fill);color:var(--ink);font-size:14px;line-height:1.55;padding:11px 13px;border-radius:10px}
/* 세부 설정 아코디언 */
.advset{border:1.5px solid var(--line);border-radius:var(--r-2);background:#fff;margin-top:52px}
.advset-sum{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:18px;font-size:18px;font-weight:800;color:var(--ink);user-select:none}
.advset-sum::-webkit-details-marker{display:none}
.advset-sub{font-weight:400;font-size:13.5px;color:var(--ink)}
.advset-arw{margin-left:auto;font-size:13px;transition:transform .18s}
.advset[open] .advset-arw{transform:rotate(180deg)}
.advset[open] .advset-sum{border-bottom:1px solid var(--line)}
.advset-body{padding:2px 18px 22px}
.advset-body .block:first-child{margin-top:22px}
.lay-els{display:flex;flex-direction:column;gap:20px}
.layel{display:flex;align-items:flex-start;gap:12px;padding:16px 14px;border:1.5px solid var(--line);border-radius:var(--r-1);background:#fff}
.layel.active{border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,20,25,.06)}
.layel .sw{width:16px;height:16px;border-radius:5px;flex:none;margin-top:3px}
.layel-mid{flex:1;min-width:0}
.layel .nm{font-size:15px;font-weight:700}
.layel .pIn{margin-top:6px}
.layel .rg{font-size:12.5px;color:var(--sub);margin-top:6px}
.layel .pick{flex:none;font-family:inherit;font-size:13px;font-weight:700;border:1.5px solid var(--line);background:#fff;border-radius:9px;padding:8px 12px;cursor:pointer;transition:.14s}
.layel.active .pick{background:var(--red);border-color:var(--red);color:#fff}
.layel .rmv{flex:none;width:30px;height:30px;border:1.5px solid var(--line);background:#fff;border-radius:8px;font-size:16px;cursor:pointer;color:var(--sub)}
.layel .rmv:hover{border-color:var(--red);color:var(--red)}
.laywrap{position:relative;max-width:100%;margin:24px auto 8px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-2);overflow:hidden;touch-action:none}
.laygrid{position:absolute;inset:0;display:grid}
.laycell{border:.5px solid #ececed}
.laycell.prev{background:rgba(230,0,18,.14)}
.layrects{position:absolute;inset:0;pointer-events:none}
.layrect{position:absolute;border:2px solid;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;text-align:center;overflow:hidden;padding:2px;line-height:1.15}
.laydl{margin-top:4px}

/* result */
.result{margin-top:var(--sp-4)}
.result[hidden],.pay[hidden]{display:none}
.rlabel{font-size:var(--fs-cap);font-weight:800;letter-spacing:var(--ls-cap);color:var(--red);
  margin-bottom:var(--sp-2);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rlabel .who{color:var(--ink);background:var(--fill);border-radius:6px;padding:3px 9px;
  font-size:12px;letter-spacing:0}
.rbox{background:var(--fill);border-radius:var(--r-2);padding:22px;font-size:16.5px;
  line-height:var(--lh-loose);white-space:pre-wrap;color:var(--ink);max-height:360px;overflow:auto}
.copy{display:block;width:100%;font-family:inherit;font-size:18px;font-weight:800;color:#fff;
  background:var(--red);border:none;border-radius:14px;padding:17px;margin-top:var(--sp-2);
  cursor:pointer;transition:.14s}
.copy:hover{background:var(--red-d)}
.copy:active{transform:scale(.99)}
.btns{display:flex;gap:10px;margin-top:var(--sp-2)}
.btns button,.btns a{font-family:inherit;font-size:17px;font-weight:800;border-radius:14px;
  padding:16px 20px;border:none;cursor:pointer;text-decoration:none;transition:.14s}
.b-copy{flex:1;background:var(--red);color:#fff}
.b-copy:hover{background:var(--red-d)}
.b-open{background:#fff;color:var(--ink);border:1.5px solid var(--line);display:inline-flex;
  align-items:center;white-space:nowrap}
.b-open:hover{border-color:var(--ink)}
.copied{display:block;text-align:center;color:var(--ok);font-weight:700;font-size:var(--fs-sm);
  margin-top:11px;min-height:18px}
.how{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--sub);line-height:var(--lh-body);text-align:center}

/* how-to (steps) */
.use{margin-top:var(--sp-6);border-top:1px solid var(--line);padding-top:var(--sp-4)}
.use .t{font-size:var(--fs-xs);font-weight:800;letter-spacing:var(--ls-cap);color:var(--red);
  margin-bottom:var(--sp-3)}
.use ol{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:var(--sp-2)}
.use li{counter-increment:s;position:relative;padding-left:38px;font-size:16px;line-height:1.55}
.use li::before{content:counter(s);position:absolute;left:0;top:1px;width:25px;height:25px;
  border-radius:50%;background:var(--ink);color:#fff;font-size:var(--fs-xs);font-weight:800;
  display:flex;align-items:center;justify-content:center}
.use li b{font-weight:700}
.use .open{display:inline-flex;align-items:center;gap:6px;margin-top:var(--sp-3);font-size:var(--fs-sm);
  font-weight:700;color:var(--ink);text-decoration:none;border:1.5px solid var(--line);
  border-radius:var(--r-1);padding:12px 18px;transition:.14s}
.use .open:hover{border-color:var(--ink)}
.use .why{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--sub);line-height:var(--lh-body)}

/* typo tool extras */
.auth{display:flex;align-items:center;gap:10px}
.auth .u{font-size:var(--fs-cap);color:var(--sub);max-width:150px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.authbtn{font-family:inherit;font-size:var(--fs-xs);font-weight:700;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:10px;padding:8px 15px;cursor:pointer;transition:.14s}
.authbtn:hover{border-color:var(--ink)}
.cat-desc{margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--sub);line-height:1.55}
.ex-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-2)}
.exchip{font-family:inherit;font-size:15px;font-weight:400;color:var(--ink);background:var(--fill);
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;transition:.14s}
.exchip:hover{border-color:var(--ink)}
.exchip.on{background:var(--red);border-color:var(--red);color:#fff;font-weight:700}
.exsearch{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-family:inherit;
  font-size:15px;font-weight:700;color:var(--ink);background:#fff;border:1.5px solid var(--line);
  border-radius:var(--r-1);padding:11px 18px;cursor:pointer;text-decoration:none;transition:.14s}
.exsearch:hover{border-color:var(--ink)}
.quota{text-align:center;font-size:var(--fs-xs);color:var(--sub);margin-top:var(--sp-2)}
.quota a{color:var(--sub);text-decoration:underline;cursor:pointer}
.pay{margin-top:var(--sp-3);background:#fff;border:1.5px solid var(--red);border-radius:var(--r-3);
  padding:30px 26px;text-align:center}
.pay h3{font-size:20px;font-weight:800}
.pay p{font-size:15.5px;color:var(--sub);margin-top:10px;line-height:1.6}
.pay .btn{display:inline-block;margin-top:18px;background:var(--red);color:#fff;font-weight:800;
  font-size:17px;border-radius:14px;padding:15px 28px;border:none;cursor:pointer;opacity:.55}

footer{text-align:center;font-size:var(--fs-label);color:var(--sub);opacity:.7;padding:var(--sp-5) 20px}

/* ============================================================
   프리미엄 인터랙션 레이어 (자료실과 통일) — 2026-08
   호버 리프트·컬러드 섀도우·프레스·포커스링·진입 모션.
   토큰/레이아웃/기능 불변. 시각 상호작용만 강화.
   ============================================================ */
:root{
  --sh-soft:0 8px 24px -12px rgba(20,20,25,.16);
  --sh-red:0 12px 28px -12px rgba(230,0,18,.4);
  --sh-red-hi:0 16px 34px -12px rgba(230,0,18,.5);
  --sh-ink:0 12px 28px -14px rgba(20,20,25,.4);
}
@keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* 접근성 — 키보드 포커스 링 (마우스 클릭엔 안 뜸) */
:focus-visible{outline:2.5px solid var(--red);outline-offset:2px}

/* 선택/버튼 계열 — 눌리는 느낌 통일 */
.tab:active,.chip:active,.stylecat-tab:active,.exchip:active,.dirbtn:active,.ratiobtn:active,
.authbtn:active,.addbtn:active,.b-open:active,.use .open:active,.exsearch:active{transform:translateY(1px) scale(.98)}

/* 호버 — 테두리만 바뀌던 것 → 살짝 떠오르고 부드러운 그림자 */
.tab:hover,.chip:hover,.stylecat-tab:hover,.exchip:hover,.dirbtn:hover,.ratiobtn:hover,.authbtn:hover,.b-open:hover{transform:translateY(-1px);box-shadow:var(--sh-soft)}
.tile:hover{transform:translateY(-2px);box-shadow:var(--sh-soft)}

/* 선택된 빨강 요소 — 컬러드 섀도우로 깊이 */
.tile.on,.exchip.on,.stylecat-tab.on,[data-group="goal"] .chip.on,.poscell.on,.ratiobtn.on{box-shadow:var(--sh-red)}
.tab.on,.chip.on,.dirbtn.on{box-shadow:var(--sh-ink)}

/* 주요 액션 — 빨강 그림자 + 리프트/눌림 */
.make,.copy,.b-copy{box-shadow:var(--sh-red)}
.make:hover,.copy:hover,.b-copy:hover{transform:translateY(-2px);box-shadow:var(--sh-red-hi)}
.make:active,.copy:active,.b-copy:active{transform:translateY(0) scale(.99)}

/* 결과 등장 — “만들기” 누르면 부드럽게 떠오름 */
.result:not([hidden]){animation:riseIn .42s cubic-bezier(.2,.7,.3,1) both}

/* 히어로 진입 */
.kick{animation:riseIn .5s ease both}
h1{animation:riseIn .5s ease .05s both}
.lead{animation:riseIn .5s ease .12s both}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .tab:hover,.chip:hover,.tile:hover,.stylecat-tab:hover,.exchip:hover,.dirbtn:hover,
  .ratiobtn:hover,.authbtn:hover,.b-open:hover,.make:hover,.copy:hover,.b-copy:hover{transform:none}
}