:root{color-scheme:dark;--bg:#111018;--panel:#1b1924;--line:#353140;--muted:#aba5b9;--text:#f3edf7;--gold:#e5c58c;--purple:#bea1ff;--soft:#272132}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,'Pretendard','Malgun Gothic',sans-serif;font-size:16px;line-height:1.6}button,input,textarea,select{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:not-allowed;opacity:.55}button,a,input,textarea,select{outline-offset:5px}button:focus-visible,a:focus-visible{outline:2px solid var(--gold)}button{border:0}button:active{transform:translateY(1px)}[hidden]{display:none!important}.top{max-width:1440px;margin:auto;height:100px;padding:0 48px;display:flex;align-items:center;gap:42px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;background:none;padding:0;font-size:24px;font-weight:750;letter-spacing:-1px;white-space:nowrap;text-align:left}.brand small{font-size:12px;letter-spacing:5px;display:block;color:var(--gold);font-weight:400}.moon{font-size:44px;line-height:1;color:var(--gold)}nav{display:flex;align-self:stretch;gap:28px}.nav{background:none;font-size:16px;color:var(--muted);border-bottom:2px solid transparent;padding:0 2px;white-space:nowrap}.nav.active{color:var(--text);border-color:var(--gold)}#shelfCount{color:var(--gold);font-size:13px;margin-left:4px}.preview-label{margin-left:auto;font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:4px 12px;white-space:nowrap}#app{max-width:1440px;margin:auto;padding:30px 48px 70px;min-height:70vh}h1,h2,h3,p{margin-top:0}h1{font-size:40px;line-height:1.25;letter-spacing:-1.7px}h2{font-size:26px;line-height:1.35;letter-spacing:-.7px}h3{font-size:20px;line-height:1.4;letter-spacing:-.4px}p{color:var(--muted)}.eyebrow{font-size:13px;letter-spacing:2px;color:var(--gold);margin-bottom:12px}.hero{position:relative;isolation:isolate;border-radius:22px;overflow:hidden;min-height:340px;padding:38px 42px;display:flex;align-items:center;background:#24202d;border:1px solid #393142;margin-bottom:34px}.hero-art{position:absolute;inset:0 0 0 48%;z-index:-2;background-size:cover;background-position:center 27%}.hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#211b2b 20%,#211b2bea 42%,#211b2b10 78%),linear-gradient(0deg,#17121c80,transparent)}.hero-content{max-width:590px}.hero h1{margin-bottom:17px}.hero p{color:#d1c6d9;max-width:440px;margin-bottom:24px}.primary{background:var(--gold);color:#231a14;font-weight:700;border-radius:10px;padding:12px 20px;display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:48px}.secondary{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:11px 18px;min-height:46px}.text-btn{color:var(--muted);background:none;padding:8px 0;text-align:left}.hero-number{position:absolute;right:24px;bottom:19px;color:#eee;font-size:13px;letter-spacing:2px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:24px 0 20px}.section-head h2{margin:0}.section-head p{margin:5px 0 0;font-size:14px}.search-wrap{position:relative;min-width:250px}.search-wrap input{margin:0;padding-left:38px}.search-mark{position:absolute;left:13px;top:10px;color:var(--muted)}input,textarea,select{width:100%;background:#15131c;border:1px solid var(--line);color:var(--text);padding:12px 14px;border-radius:9px}textarea{resize:vertical;line-height:1.75}input::placeholder,textarea::placeholder{color:#8c849b}.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}.chip{background:transparent;border:1px solid var(--line);padding:8px 17px;min-height:43px;border-radius:22px;color:var(--muted);font-size:14px}.chip.active{background:#e5c58c;color:#231a14;border-color:#e5c58c}.count{color:var(--muted);font-size:14px;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px 20px}.char-card{min-width:0;position:relative}.char-open{display:block;width:100%;padding:0;background:none;text-align:left}.portrait{width:100%;aspect-ratio:3/4.6;background-repeat:no-repeat;background-color:#272132;background-size:cover;background-position:center 20%;border-radius:13px;overflow:hidden;position:relative}.char-card .portrait{transition:filter .2s}.char-open:hover .portrait{filter:brightness(1.12)}.portrait:after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#100e17b0)}.card-badge{position:absolute;left:10px;bottom:12px;z-index:1;background:#18121cb0;border:1px solid #ffffff25;border-radius:5px;padding:3px 8px;font-size:12px;color:#eee}.fav{position:absolute;right:10px;top:10px;width:36px;height:36px;display:grid;place-items:center;background:#17121bbd;border:1px solid #ffffff30;border-radius:50%;font-size:23px;line-height:1;z-index:2}.fav.chosen{color:var(--gold)}.card-title{display:flex;gap:10px;align-items:center;margin:13px 0 4px}.card-title h3{margin:0;font-size:21px}.card-title span{font-size:12px;color:var(--muted)}.char-card .headline{font-size:14px;color:#d8cde5;margin:0 0 7px}.char-card .quote{font-size:14px;color:#9f96af;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;line-height:1.65}.empty{grid-column:1/-1;text-align:center;padding:70px 20px;border:1px dashed var(--line);border-radius:16px}.empty h2{margin-bottom:10px}.page-title{margin:16px 0 30px}.page-title h1{margin-bottom:10px}.profile{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.3fr);gap:52px;align-items:start;margin-top:14px}.profile-picture{position:sticky;top:20px}.profile-picture .portrait{aspect-ratio:3/4.3;max-height:760px}.look-controls{display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:var(--muted);font-size:14px}.look-controls button{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 16px}.profile h1{font-size:52px;margin:5px 0 10px}.profile .subtitle{font-size:21px;color:var(--gold);margin-bottom:20px}.profile-quote{padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:22px;color:#e1d3f5;font-family:Georgia,'Batang',serif;line-height:1.7;margin:24px 0}.tags{display:flex;gap:8px;flex-wrap:wrap}.tag{background:#272130;color:#c8b8df;padding:5px 11px;border-radius:5px;font-size:13px}.bio-block{margin:25px 0}.bio-block h3{font-size:16px;color:#e1d7e9;margin:0 0 8px}.bio-block p{line-height:1.9;font-size:16px;margin:0}.secret-box{padding:19px;background:#211c2b;border-left:2px solid #8d70b3;border-radius:0 10px 10px 0}.secret-box summary{cursor:pointer;color:var(--purple);font-size:15px}.secret-box p{font-size:15px;margin:12px 0 0}.profile-actions{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.scenario-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.scenario{background:#1b1823;border:1px solid var(--line);border-radius:14px;padding:23px;display:flex;flex-direction:column;align-items:start;text-align:left;min-width:0}.scenario:hover{border-color:#826b9c;background:#211c2b}.scenario .genre{color:var(--gold);font-size:12px;letter-spacing:.8px;margin-bottom:11px}.scenario h3{font-size:19px;margin-bottom:10px}.scenario p{font-size:14px;line-height:1.75;margin-bottom:18px}.scenario .bottom{margin-top:auto;color:var(--purple);font-size:14px;display:flex;width:100%;justify-content:space-between}.story-person{display:flex;gap:12px;align-items:center;margin-bottom:16px;color:#e4d8ed;font-size:14px}.tiny{width:40px;flex:none;aspect-ratio:1;border-radius:50%}.tiny:after{display:none}.catalog-stories{grid-template-columns:repeat(3,minmax(0,1fr))}.reader-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:44px;margin-top:20px;align-items:start}.reader-aside{position:sticky;top:20px}.reader-aside .portrait{aspect-ratio:3/4}.reader-aside h2{margin:16px 0 5px}.reader-aside p{font-size:14px}.reader-aside .secondary{width:100%;margin-top:8px}.reader-paper{background:linear-gradient(#201c28,#17151e);border:1px solid var(--line);border-radius:18px;padding:38px 42px}.reader-paper h1{font-size:30px;letter-spacing:-.8px}.scene-text{font-family:Georgia,'Batang',serif;font-size:20px;line-height:2.05;color:#e1dbe6;white-space:pre-wrap}.speech{background:#2e243e;border-left:3px solid #b394dd;border-radius:0 10px 10px 0;padding:21px 24px;margin:26px 0;font-size:20px;color:#ddc6ff;line-height:1.9}.speech strong{display:block;font-family:'Malgun Gothic',sans-serif;font-size:14px;color:var(--purple);margin-bottom:8px}.turn-divider{display:flex;align-items:center;gap:15px;color:var(--gold);font-size:14px;margin:34px 0}.turn-divider:before,.turn-divider:after{content:'';height:1px;background:var(--line);flex:1}.composer{margin-top:24px}.composer label{display:flex;justify-content:space-between;color:#cec1df;font-size:15px;margin-bottom:10px}.composer textarea{background:#121018;min-height:140px}.composer-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px}.composer-bottom span{font-size:13px;color:var(--muted)}.micro{font-size:13px;line-height:1.7;color:#a69cb3}.setting-details{border-bottom:1px solid var(--line);padding:0 0 18px;margin:20px 0 28px;color:var(--muted);font-size:14px}.setting-details summary{cursor:pointer}.setting-details p{white-space:pre-wrap;margin:14px 0 0}.book-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.book-card{display:flex;gap:20px;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:14px}.book-card .portrait{width:100px;flex:none;aspect-ratio:3/4}.book-card h3{font-size:19px;margin:5px 0 8px}.book-card p{font-size:14px;margin:0 0 12px}.book-card .secondary{font-size:14px;padding:7px 14px;min-height:38px}.book-info{min-width:0}.actions{display:flex;gap:12px;justify-content:flex-end}.danger{background:#643641;border:1px solid #a75c6a;padding:10px 18px;border-radius:9px}.wide{width:100%}dialog{border:1px solid #5d4a70;border-radius:19px;background:#201b29;color:var(--text);max-width:540px;width:calc(100% - 32px);padding:28px;max-height:90vh;overflow:auto}dialog::backdrop{background:#08060bc9;backdrop-filter:blur(7px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;color:var(--gold);margin-bottom:12px}.icon{width:35px;height:35px;background:var(--soft);border-radius:50%;font-size:24px}.dialog-top small{letter-spacing:2px}dialog p{font-size:15px}dialog label{display:block;margin:18px 0 7px;font-size:15px}dialog label small{font-size:12px;color:var(--muted);margin-left:10px}dialog .micro{margin:12px 0 18px}footer{max-width:1344px;border-top:1px solid var(--line);padding:26px 0 40px;margin:0 auto;color:#a99ab9;font-size:13px}footer p{font-size:12px;margin:7px 0;max-width:790px}#notice{max-width:1344px;margin:15px auto;padding:15px;background:#493044;border:1px solid #b18592;border-radius:9px}.save-status{color:var(--gold)!important}.back{margin-bottom:12px}.reader-status{padding:12px 16px;background:#201b2a;border-radius:8px;font-size:13px;color:#b6a7c8}.no-results{grid-column:1/-1}.custom-scenario{margin-top:20px;width:100%;border:1px dashed #685378;border-radius:12px;padding:18px;color:var(--purple);background:transparent}.hero .primary:hover,.primary:hover{background:#f1d5a3}@media(min-width:1400px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}@media(max-width:1050px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}.top{padding:0 28px;gap:28px}#app{padding:25px 28px 60px}footer{margin:0 28px}.profile{gap:30px}.reader-layout{grid-template-columns:200px 1fr;gap:25px}.reader-paper{padding:28px}.catalog-stories{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.top{height:auto;min-height:98px;flex-wrap:wrap;padding:17px 20px 0;gap:10px}.brand{font-size:21px}.brand small{font-size:10px}.moon{font-size:35px}.preview-label{position:absolute;top:25px;right:20px}nav{order:3;width:100%;height:48px;gap:25px}.nav{font-size:15px}#app{padding:20px 18px 45px}.hero{min-height:320px;padding:26px 23px;border-radius:16px;margin-bottom:27px;align-items:end}.hero h1{font-size:30px;max-width:260px}.hero p{font-size:14px;max-width:245px;margin-bottom:18px}.hero-art{left:32%;background-position:center 20%}video.hero-art{object-position:center 20%}.hero:after{background:linear-gradient(90deg,#211b2bed 0%,#211b2b80 65%,transparent),linear-gradient(0deg,#211b2b,transparent 95%)}.hero-number{display:none}.hero .primary{font-size:14px;min-height:43px;padding:9px 16px}.section-head{align-items:start;flex-direction:column;gap:16px}.section-head h2{font-size:23px}.search-wrap{width:100%}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 13px}.portrait{border-radius:10px}.filters{gap:6px}.chip{padding:7px 13px;font-size:13px}.card-title{gap:6px}.card-title h3{font-size:20px}.card-title span{font-size:11px}.char-card .headline{font-size:13px}.char-card .quote{font-size:13px}.profile{grid-template-columns:1fr;gap:22px}.profile-picture{position:static;max-width:460px;width:100%;margin:auto}.profile-picture .portrait{aspect-ratio:4/4.5}.profile h1{font-size:40px}.profile-quote{font-size:21px}.scenario-grid,.catalog-stories{grid-template-columns:1fr}.scenario{padding:21px}.reader-layout{grid-template-columns:1fr;gap:20px}.reader-aside{position:static;display:grid;grid-template-columns:70px 1fr;gap:0 15px;align-items:center}.reader-aside .portrait{grid-row:1/4;width:70px;aspect-ratio:3/4}.reader-aside h2{font-size:20px;margin:0}.reader-aside p{margin:0;font-size:13px}.reader-aside .secondary{grid-column:1/-1;font-size:14px;padding:7px;min-height:37px}.reader-paper{padding:24px 20px;border-radius:13px}.reader-paper h1{font-size:26px}.scene-text{font-size:18px;line-height:2}.speech{font-size:18px;padding:17px}.composer-bottom{align-items:start;flex-direction:column}.composer-bottom .primary{width:100%}.book-list{grid-template-columns:1fr}.book-card{gap:15px}.book-card .portrait{width:78px}.book-card h3{font-size:17px}.page-title h1{font-size:31px}footer{margin:0 18px;font-size:12px}#notice{margin:12px 18px}.section-head .text-btn{align-self:flex-end}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.casting{padding:12px;border-top:1px solid #403748}.casting small{display:block;color:#c5b8d5;margin-bottom:8px}.casting>div{display:flex;gap:6px;flex-wrap:wrap}.casting .chip{padding:7px 12px;min-height:38px}.profile .casting{margin:12px 0}.char-card{overflow:hidden}

.world-filter{display:flex;align-items:center;gap:12px;margin:16px 0}.world-filter select,.taste-controls select{background:#24202d;color:#efe5f7;border:1px solid #665778;border-radius:10px;padding:11px;max-width:100%;font:inherit}.taste-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.taste-controls label{display:grid;gap:8px}.secret-box h3{color:#e6c58c;margin:22px 0 8px}.secret-box p{line-height:1.9}.bio-block p+p{margin-top:12px}@media(max-width:480px){.taste-controls{grid-template-columns:1fr}.world-filter{align-items:flex-start;flex-direction:column}}

/* Additional portraits and explicitly fictional popularity */
.popularity{position:absolute;left:10px;top:10px;z-index:2;display:grid;gap:1px;padding:6px 9px;background:#16121cde;border:1px solid #ffffff26;border-radius:8px;text-align:left;backdrop-filter:blur(8px)}.popularity small{font-size:10px;color:#cfc2dd}.popularity strong{font-size:16px;color:#fff;line-height:1.2}.gallery-tabs{display:flex;gap:10px;margin-top:14px;overflow-x:auto;padding-bottom:5px}.gallery-tab{padding:4px;min-width:84px;width:84px;flex-shrink:0;background:#211b2c;border:2px solid transparent;border-radius:10px;color:#cfc7d8}.gallery-tab.active{border-color:var(--gold);color:#fff}.gallery-tab .portrait{aspect-ratio:2/3!important;border-radius:6px}.gallery-tab span{font-size:11px;display:block;margin:5px 0 2px}.profile-picture #lookPicture .portrait{aspect-ratio:2/3;max-height:none}.world-filter{flex-wrap:wrap}.world-filter select{max-width:100%}@media(max-width:600px){.popularity{left:7px;top:7px;padding:5px 7px}.popularity strong{font-size:14px}.popularity small{font-size:9px}.gallery-tab{width:72px;min-width:72px}}

/* Reading and unobstructed portraits */
.card-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;margin:8px 0}.card-meta .popularity{position:static;display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;border-radius:0;padding:0;backdrop-filter:none}.card-meta .popularity strong{font-size:13px;color:var(--gold)}.card-meta .popularity small,.look-total{font-size:11px;color:var(--muted)}.card-title{flex-wrap:wrap}.profile-picture{min-width:0}.reader-paper,.book-info,.profile p{overflow-wrap:anywhere}.speech{white-space:pre-wrap}.top{position:relative;z-index:10}.brand{position:relative;z-index:11;min-height:48px}.gallery-tabs{max-width:100%}.gallery-tab:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}.world-filter select{width:auto;flex:1;min-width:150px}@media(max-width:480px){.world-filter select{width:100%}.card-meta{align-items:flex-start;flex-direction:column}.card-meta .popularity strong{font-size:12px}}

/* 3) style.css 맨 아래에 추가 */

#characterGrid.home-rails {
  display: block;
  min-width: 0;
  max-width: 100%;
}

.home-rail-section {
  min-width: 0;
  margin: 0 0 14px;
}

.home-rail-section > h3 {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 22px;
}

.home-rail-section > h3 small {
  margin-left: 5px;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

.home-rail {
  display: flex;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: auto;
  overscroll-behavior-x: contain;
}

.home-rail::-webkit-scrollbar {
  display: none;
}

.rail-person {
  position: relative;
  flex: 0 0 var(--person-width);
  width: var(--person-width);
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 9px;
  background: #211b2c;
  scroll-snap-align: start;
}

.rail-open {
  display: block;
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.rail-picture {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.08;
  background: #2b2435;
}

video.hero-art { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }

.rail-preview-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ★인물 상세 큰 사진 자리는 레일 카드보다 세로로 길다(3/4) — 영상(9/16)을 기본 가운데로
   자르면 얼굴이 위로 잘려 나간다. 얼굴 쪽으로 살짝 올려서 자른다. */
.profile-picture .rail-preview-video {
  object-position: center 10%;
}

.rail-picture > .portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
  border-radius: 9px 9px 0 0;
}

.rail-name {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 5px 5px 0;
}

.rail-name strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 20px;
}

.rail-name small {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 9px;
  color: var(--muted);
}

.rail-open > p {
  margin: 2px 5px 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 17px;
  color: #c7bbd3;
}

.rail-heart {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0 9px 0 9px;
  background: #17121bc9;
  color: #fff;
  font-size: 21px;
  cursor: pointer;
}

.rail-heart[aria-pressed="true"] {
  color: #f0a5cc;
}

.home-rail > .rail-more {
  flex: 0 0 var(--person-width);
  min-height: 120px;
  padding: 10px;
  border: 1px solid #665778;
  border-radius: 9px;
  background: #211b2c;
  color: var(--gold);
  font: inherit;
  scroll-snap-align: start;
  cursor: pointer;
}

.home-rail.rail-expanded {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(var(--person-width), 1fr));
  overflow: visible;
  scroll-snap-type: none;
}

.rail-expanded .rail-person {
  width: 100%;
}

.home-rail:focus-visible,
.rail-open:focus-visible,
.rail-heart:focus-visible,
.rail-more:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

@media (max-width: 600px) {
  #app:has(.home-rails) {
    padding-left: 8px;
    padding-right: 8px;
  }

  #app:has(.home-rails) .hero {
    min-height: 180px;
    padding: 18px;
    margin-bottom: 18px;
  }

  #app:has(.home-rails) .hero h1 {
    font-size: 25px;
  }

  #app:has(.home-rails) .hero p {
    font-size: 12px;
    margin-bottom: 12px;
  }

  #app:has(.home-rails) .filters {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    touch-action: auto;
  }

  #app:has(.home-rails) .filters::-webkit-scrollbar {
    display: none;
  }

  #app:has(.home-rails) .chip {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* ── AI 대화 — 2026-09-21. 지문/대사/손님말을 눈으로 가른다 ── */
.talk-inline-action{font-style:italic;color:var(--muted);white-space:pre-wrap}
.talk-flow{
  display:flex;flex-direction:column;gap:14px;
  margin:26px 0 22px;padding:22px 0 0;border-top:1px solid var(--line);
}
/* 지문 — 속마음·장면. 가운데·기울임·얼굴 없음 */
.talk-stage{
  margin:0;align-self:center;max-width:82%;
  font-family:Georgia,'Batang',serif;font-style:italic;
  font-size:15px;line-height:1.85;color:#9a90ab;text-align:center;
}
/* 대사 — 인물. 왼쪽 */
.talk-char{
  align-self:flex-start;max-width:86%;
  background:#241f30;border:1px solid #3d3450;
  border-radius:4px 16px 16px 16px;padding:14px 17px;
}
.talk-char strong{
  display:block;font-size:12px;letter-spacing:.5px;
  color:var(--gold);font-weight:700;margin-bottom:6px;
}
.talk-char p{margin:0;color:#ece4f3;font-size:15px;line-height:1.85;white-space:pre-wrap}
/* 손님 말 — 오른쪽 */
.talk-guest{align-self:flex-end;max-width:78%;text-align:right}
.talk-guest small{
  display:block;font-size:10px;letter-spacing:1px;
  color:var(--muted);margin-bottom:4px;
}
.talk-guest p{
  margin:0;display:inline-block;text-align:left;
  background:var(--gold);color:#231a14;
  border-radius:16px 4px 16px 16px;padding:12px 16px;
  font-size:15px;line-height:1.8;white-space:pre-wrap;
}
/* 속으로 말한 것 — 같은 오른쪽이되 «속이 빈» 꼴 */
.talk-guest.is-inner p{
  background:transparent;color:#c3b7d2;
  border:1px dashed #6b5c80;
}
/* ＊ 지시문 — 손님이 장면을 돌린 것 */
.talk-guest.is-direct p{
  background:#2e2440;color:#d8c8f0;border:1px solid #7b62a3;
}
.talk-guest.is-direct small,.talk-guest.is-inner small{color:#8d80a3}

.talk-wait{
  align-self:flex-start;margin:0;font-size:13px;color:var(--muted);
  padding:10px 15px;background:#1e1a27;border-radius:14px;
}

/* 입력줄 단추 셋 */
.composer-bottom #btnStar,.composer-bottom #btnInner{
  font-size:13px;padding:9px 13px;min-height:42px;
}
.composer-bottom #btnStar{color:#c9b3e8;border-color:#5b4a72}

@media(max-width:760px){
  .talk-char,.talk-guest{max-width:92%}
  .talk-stage{max-width:94%;font-size:14px}
  .talk-char p,.talk-guest p{font-size:14px}
  .composer-bottom{flex-direction:row;flex-wrap:wrap;gap:8px}
  .composer-bottom #btnSay{flex:1;min-width:120px}
  .composer-bottom #btnStar,.composer-bottom #btnInner{flex:0 0 auto}
}

/* ★답을 못 받았을 때 띄우는 줄 — ★손님이 «내 글이 날아갔나» 걱정하지 않게 (2026-09-21) */
.talk-warn{margin:10px 0;padding:10px 12px;border-radius:10px;line-height:1.55;font-size:14px;
  background:rgba(180,120,60,.14);border:1px solid rgba(180,120,60,.35);color:#e8d6bf}
.talk-warn b{color:#ffd9a3}
.talk-warn .waitmsg{display:inline-block;margin:4px 0;padding:6px 9px;border-radius:8px;
  background:rgba(0,0,0,.22);color:#f0e6d6;word-break:break-word}
.talk-warn .small{padding:5px 11px;font-size:13px;border-radius:8px;margin-top:4px}

/* ═══ ★삽화 — 대표 발주 2026-09-21 ═══
   ★★발주 1항 「자동으로 화면을 끌어올리거나 ★읽는 위치를 움직이지 않는다」
      → ★자리를 ★처음부터 잡아 둔다. ★그림이 채워져도 ★아래 글이 ★안 밀린다 */
.illust{
  margin:14px 0; padding:0; border-radius:12px; overflow:hidden;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
  aspect-ratio:1/1;                 /* ★★높이를 ★미리 확보 — 이것이 밀림을 막는다 */
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.illust img{ width:100%; height:100%; object-fit:cover; display:block; }
.illust figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:8px 12px; font-size:12px; letter-spacing:.02em;
  color:#e8e2d9; background:linear-gradient(transparent,rgba(0,0,0,.72));
}
.illust-wait,.illust-fail{
  padding:18px; text-align:center; font-size:13px; line-height:1.7;
  color:rgba(255,255,255,.62);
}
.illust-fail{ color:rgba(255,220,200,.80); }
.illust-wait::before{
  content:''; display:block; width:22px; height:22px; margin:0 auto 10px;
  border:2px solid rgba(255,255,255,.22); border-top-color:rgba(255,255,255,.72);
  border-radius:50%; animation:illustspin 1s linear infinite;
}
@keyframes illustspin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .illust-wait::before{ animation:none } }
/* ★폰 — 너무 커지지 않게 */
@media (max-width:480px){ .illust{ aspect-ratio:4/5; } }

/* ═══ ★추천문 — 대표 발주 2026-09-21 ═══
   ★발주 ① 입력창 ★바로 위 · ★발주 ② 접어도 입력창은 그대로 */
.suggest{ margin:10px 0 8px; display:flex; flex-direction:column; gap:7px; }
.suggest-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:12px; letter-spacing:.02em; color:rgba(255,255,255,.52);
}
.suggest-toggle{
  background:none; border:0; padding:4px 2px; cursor:pointer;
  font:inherit; font-size:12px; color:rgba(255,255,255,.62);
  text-decoration:underline; text-underline-offset:3px;
}
.suggest-toggle:hover{ color:rgba(255,255,255,.88); }
.suggest-chip{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:11px 13px; border-radius:11px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.045);
  color:#e9e3da; font:inherit; font-size:14px; line-height:1.55;
  transition:background .14s, border-color .14s;
}
.suggest-chip:hover{ background:rgba(255,255,255,.085); border-color:rgba(255,255,255,.26); }
.suggest-chip:active{ background:rgba(255,255,255,.12); }
.suggest-chip:focus-visible{ outline:2px solid rgba(255,220,180,.65); outline-offset:2px; }
/* ★폰 375px — ★손가락에 잡히게 */
@media (max-width:480px){
  .suggest-chip{ padding:12px 13px; font-size:14px; min-height:44px; }
  .suggest-toggle{ min-height:36px; }
}
@media (prefers-reduced-motion:reduce){ .suggest-chip{ transition:none } }

/* ═══ ★「내 마음을 말로」 — 대표 발주 2026-09-21 ═══ */
.mind{
  margin:10px 0 8px; padding:13px; border-radius:13px;
  border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.035);
  display:flex; flex-direction:column; gap:9px;
}
.mind:empty{ display:none; padding:0; border:0; margin:0; }
.mind-head{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:13px; color:rgba(255,255,255,.72); }
.mind-modes{ display:flex; gap:6px; flex-wrap:wrap; }
.mind-mode{
  padding:6px 11px; border-radius:999px; cursor:pointer; font:inherit; font-size:12px;
  border:1px solid rgba(255,255,255,.16); background:transparent; color:rgba(255,255,255,.62);
  min-height:32px;
}
.mind-mode.on{ background:rgba(255,220,180,.16); border-color:rgba(255,220,180,.48); color:#f4e7d6; }
#mindWish{
  width:100%; box-sizing:border-box; resize:vertical; min-height:56px;
  padding:10px 12px; border-radius:10px; font:inherit; font-size:14px; line-height:1.6;
  border:1px solid rgba(255,255,255,.16); background:rgba(0,0,0,.22); color:#ece6dd;
}
.mind-go{ align-self:flex-start; min-height:40px; }
.mind-wait,.mind-fail,.mind-ask{ font-size:13px; line-height:1.7; padding:9px 2px; }
.mind-wait{ color:rgba(255,255,255,.56); }
.mind-fail{ color:rgba(255,214,196,.86); }
.mind-ask{ color:#f0e5d6; border-left:2px solid rgba(255,220,180,.5); padding-left:11px; }
.mind-head2{ font-size:12px; color:rgba(255,255,255,.5); margin-top:2px; }
.mind-item{ display:flex; flex-direction:column; gap:3px; }
.mind-pick{
  display:flex; flex-direction:column; gap:4px; align-items:flex-start; text-align:left;
  width:100%; cursor:pointer; padding:11px 13px; border-radius:11px; min-height:44px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.045);
  color:#e9e3da; font:inherit;
}
.mind-pick:hover{ background:rgba(255,255,255,.085); }
.mind-tone{ font-size:11px; letter-spacing:.04em; color:rgba(255,220,180,.78); }
.mind-line{ font-size:14px; line-height:1.55; }
.mind-why{ font-size:12px; color:rgba(255,255,255,.5); padding:0 4px; }
.mind-why summary{ cursor:pointer; padding:5px 0; min-height:28px; }
.mind-why p{ margin:2px 0 6px; line-height:1.65; color:rgba(255,255,255,.62); }
@media (max-width:480px){
  .mind{ padding:11px; }
  .mind-pick{ padding:12px; }
  .mind-mode{ min-height:36px; }
}

/* ═══ ★상황극 「이럴 땐 뭐라고 말하지?」 — 대표 발주 2026-09-21 ═══
   ★카드 크기는 ★기존 --person-width 를 그대로 쓴다 (sizeCards 가 맞춰 준다) */
#practiceRail h3 small{ font-weight:400; color:rgba(255,255,255,.5); margin-left:8px; }
.rail-practice .rail-name strong{ font-size:13px; line-height:1.45; }
.rail-practice .rail-name small{ color:rgba(255,220,180,.72); }
.rail-practice p{ color:rgba(255,255,255,.56); }

.practice-intro{ display:flex; flex-direction:column; gap:18px; max-width:720px; margin:14px auto 40px; }
.practice-art{ position:relative; width:100%; max-width:300px; aspect-ratio:3/4; border-radius:14px;
  overflow:hidden; align-self:center; }
.practice-body{ display:flex; flex-direction:column; gap:11px; }
.practice-body h1{ margin:0; font-size:clamp(21px,5vw,28px); line-height:1.3; text-wrap:balance; }
.practice-situation{ margin:0; font-size:15px; line-height:1.65; color:#eadfd2;
  border-left:2px solid rgba(255,220,180,.5); padding-left:12px; }
.practice-intro-text{ margin:0; font-size:14px; line-height:1.75; color:rgba(255,255,255,.7); }
.practice-notice{ margin:4px 0 0; font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.045); border-radius:9px; padding:10px 12px; }
.practice-form{ display:flex; flex-direction:column; gap:7px; margin-top:6px; }
.practice-form label{ font-size:13px; color:rgba(255,255,255,.72); margin-top:6px; }
.practice-form input,.practice-form textarea{
  width:100%; box-sizing:border-box; padding:10px 12px; border-radius:10px;
  font:inherit; font-size:14px; line-height:1.6; resize:vertical;
  border:1px solid rgba(255,255,255,.16); background:rgba(0,0,0,.22); color:#ece6dd;
}
.practice-warn{ margin:6px 0 0; font-size:13px; color:rgba(255,214,196,.9); }
@media (max-width:480px){
  .practice-art{ max-width:100%; aspect-ratio:4/3; }
  .practice-intro{ gap:14px; }
}

/* ═══ ★음성 입력 — 대표 발주 2026-09-21 ═══ */
.voice:empty{ display:none; }
.voice{ margin:8px 0; display:flex; flex-direction:column; gap:6px; }
.voice-live{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:10px 12px; border-radius:11px;
  background:rgba(255,120,120,.10); border:1px solid rgba(255,140,140,.32);
}
.voice-dot{
  width:9px; height:9px; border-radius:50%; background:#ff7a7a; flex:none;
  animation:voicepulse 1.1s ease-in-out infinite;
}
@keyframes voicepulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.8)} }
@media (prefers-reduced-motion:reduce){ .voice-dot{ animation:none } }
.voice-label{ font-size:13px; color:#f3e2df; flex:1 1 auto; }
.voice-stop,.voice-cancel{
  padding:7px 13px; border-radius:999px; cursor:pointer; font:inherit; font-size:12.5px;
  min-height:36px; border:1px solid rgba(255,255,255,.22); background:transparent; color:#f0e8e4;
}
.voice-stop{ background:rgba(255,255,255,.12); }
.voice-interim{
  font-size:13.5px; line-height:1.65; color:rgba(255,255,255,.52);
  padding:2px 4px; font-style:italic;
}
.voice-msg{
  font-size:13px; line-height:1.65; color:rgba(255,214,196,.86);
  padding:9px 11px; border-radius:9px; background:rgba(255,255,255,.04);
}
.voice-btn{ font-size:16px; line-height:1; min-width:44px; min-height:44px; padding:0 12px; }
@media (max-width:480px){ .voice-stop,.voice-cancel{ min-height:40px; } }

/* ═══ ★이야기 기능 5종 — 대표 발주 2026-09-21 ═══ */
/* ★시스템 안내 — ★인물 대사와 ★눈으로 구분되게 */
.sysnote{
  margin:10px 0; padding:11px 13px; border-radius:11px;
  background:rgba(255,220,180,.08); border:1px solid rgba(255,220,180,.24);
  display:flex; flex-direction:column; gap:3px;
}
.sysnote-tag{ font-size:11px; letter-spacing:.05em; color:rgba(255,220,180,.82); }
.sysnote strong{ font-size:14px; color:#f2e9dc; }
.sysnote em{ font-size:12.5px; font-style:normal; line-height:1.65; color:rgba(255,255,255,.62); }

/* ★② 해볼 일 */
.goals{ margin:14px 0; }
.goals-box{ border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:11px 13px;
  background:rgba(255,255,255,.03); }
.goals-box summary{ cursor:pointer; font-size:14px; color:#eadfd2; display:flex;
  align-items:center; justify-content:space-between; gap:10px; min-height:32px; }
.goals-count{ font-size:12px; color:rgba(255,220,180,.8); font-variant-numeric:tabular-nums; }
.goal{ display:flex; gap:9px; align-items:flex-start; width:100%; text-align:left; cursor:pointer;
  margin-top:7px; padding:10px 11px; border-radius:10px; font:inherit;
  border:1px solid rgba(255,255,255,.1); background:transparent; color:#e6e0d7; min-height:44px; }
.goal.on{ border-color:rgba(255,220,180,.45); background:rgba(255,220,180,.07); }
.goal.done{ opacity:.6; }
.goal-mark{ flex:none; color:rgba(255,220,180,.85); }
.goal strong{ display:block; font-size:13.5px; }
.goal em{ display:block; font-style:normal; font-size:12px; line-height:1.6; color:rgba(255,255,255,.52); margin-top:2px; }

/* ★④ 내가 가진 것 */
.items{ margin:8px 0; }
.items-toggle{ padding:9px 13px; border-radius:999px; cursor:pointer; font:inherit; font-size:13px;
  min-height:40px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04); color:#e9e3da; }
.items-toggle span{ color:rgba(255,220,180,.85); margin-left:5px; }
.items-list{ margin-top:8px; display:flex; flex-direction:column; gap:8px; }
.item{ padding:10px 12px; border-radius:11px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.035); }
.item-head{ display:flex; align-items:baseline; justify-content:space-between; gap:9px; }
.item-head small{ font-size:11.5px; color:rgba(255,255,255,.48); }
.item-acts{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.item-acts button{ padding:7px 11px; border-radius:999px; cursor:pointer; font:inherit; font-size:12px;
  min-height:36px; border:1px solid rgba(255,255,255,.16); background:transparent; color:#e0d9d0; }

/* ★① 분기 */
.rebranch{ display:block; margin-top:7px; padding:5px 0; background:none; border:0; cursor:pointer;
  font:inherit; font-size:11.5px; color:rgba(255,255,255,.44); text-decoration:underline;
  text-underline-offset:3px; min-height:30px; }
.rebranch:hover{ color:rgba(255,255,255,.78); }
.branch{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin:0 0 12px;
  padding:9px 11px; border-radius:10px; background:rgba(255,255,255,.04);
  font-size:12.5px; color:rgba(255,255,255,.6); }
.branch button{ padding:6px 11px; border-radius:999px; cursor:pointer; font:inherit; font-size:12px;
  min-height:34px; border:1px solid rgba(255,255,255,.18); background:transparent; color:#e6ded4; }

/* ★③ 역할 */
.roles{ margin:10px 0 4px; }
.roles label{ font-size:13px; color:rgba(255,255,255,.72); }
.role-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.role-chip{ padding:8px 12px; border-radius:999px; cursor:pointer; font:inherit; font-size:12.5px;
  min-height:38px; border:1px solid rgba(255,255,255,.16); background:transparent; color:rgba(255,255,255,.66); }
.role-chip.on{ background:rgba(255,220,180,.16); border-color:rgba(255,220,180,.5); color:#f4e7d6; }
.role-desc{ margin:8px 0 0; font-size:12.5px; line-height:1.7; color:rgba(255,255,255,.6); }
.role-desc small{ color:rgba(255,255,255,.45); }

/* ═══ ★실전 연습실 — 대표 발주 2026-09-21 ═══ */
.react-chips{ display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 2px; }
.react-chip{ padding:8px 12px; border-radius:999px; cursor:pointer; font:inherit; font-size:12.5px;
  min-height:38px; border:1px solid rgba(255,255,255,.16); background:transparent; color:rgba(255,255,255,.66); }
.react-chip.on{ background:rgba(255,220,180,.16); border-color:rgba(255,220,180,.5); color:#f4e7d6; }
.goalcand-ask{ align-self:flex-start; margin-top:6px; padding:7px 12px; border-radius:999px;
  cursor:pointer; font:inherit; font-size:12.5px; min-height:36px;
  border:1px dashed rgba(255,255,255,.24); background:transparent; color:rgba(255,255,255,.62); }
.goal-cand{ display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.goal-cand:empty{ display:none; }
.goalcand{ text-align:left; padding:10px 12px; border-radius:10px; cursor:pointer; font:inherit;
  font-size:13px; line-height:1.55; min-height:42px;
  border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.04); color:#e6e0d7; }
.goalcand:hover{ background:rgba(255,255,255,.08); }

/* ═══ ★「당신이 끼어든 명작」 — 대표 발주 2026-09-21 ═══
   ★★그림이 아직 없다. ★깨진 이미지나 빈 회색 네모 대신 ★디자인 카드를 보여준다.
   ★assets/classics/ 에 그림을 넣으면 ★JS 가 has-cover 를 붙여 ★자동 교체된다 */
#classicRail h3 small{ font-weight:400; color:rgba(255,255,255,.5); margin-left:8px; }
.classic-cover{
  position:relative; width:100%; aspect-ratio:3/4; border-radius:10px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; gap:4px;
  padding:11px 10px; box-sizing:border-box;
  background-size:cover; background-position:center;
}
.classic-cover::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.13), transparent 60%),
    linear-gradient(transparent 35%, rgba(0,0,0,.55));
}
.classic-cover.has-cover::before{ background:linear-gradient(transparent 40%, rgba(0,0,0,.72)); }
.classic-title{ position:relative; font-size:13px; line-height:1.35; font-weight:700; color:#f2ece2; }
.classic-sub{ position:relative; font-size:10.5px; letter-spacing:.04em; color:rgba(255,255,255,.58); }
.rail-classic .rail-name small{ color:rgba(255,220,180,.7); }
.rail-classic p{ color:rgba(255,255,255,.56); }

.classic-intro{ display:flex; flex-direction:column; gap:16px; max-width:720px; margin:14px auto 40px; }
.classic-hero{ border-radius:14px; padding:22px 18px; display:flex; flex-direction:column; gap:7px; }
.classic-hero .eyebrow{ font-size:11px; letter-spacing:.06em; color:rgba(255,255,255,.55); }
.classic-hero h1{ margin:0; font-size:clamp(22px,5.4vw,30px); line-height:1.28; text-wrap:balance; }
.classic-hero p{ margin:0; font-size:14.5px; line-height:1.65; color:rgba(255,255,255,.78); }
.classic-intro-text{ margin:0; font-size:14px; line-height:1.78; color:rgba(255,255,255,.7); }
.classic-cast{ display:flex; flex-direction:column; gap:8px; }
.classic-cast h3{ margin:0 0 2px; font-size:13px; color:rgba(255,255,255,.62); font-weight:500; }
.classic-cast .cc{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:10px;
  border:1px solid rgba(255,255,255,.11); background:rgba(255,255,255,.035); }
.classic-cast .cc strong{ font-size:13.5px; color:#ece5db; }
.classic-cast .cc span{ font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.55); }
@media (max-width:480px){ .classic-hero{ padding:18px 15px; } }

/* ★그림이 없는 인물 — ★빈 회색 네모 대신 ★이름이 있는 디자인 카드 */
.portrait-blank{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:18px 12px; box-sizing:border-box; min-height:120px;
}
.portrait-blank::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 25% 10%, rgba(255,255,255,.14), transparent 62%);
}
.portrait-blank span{
  position:relative; font-size:15px; font-weight:700; letter-spacing:.02em;
  color:rgba(255,255,255,.88); text-align:center; line-height:1.4;
}

/* RC1 approved cold-open styles only */
.yadam-reader-v3 .killer01-final-speech.is-pending{display:none}
.yadam-reader-v3 .killer01-ghost{margin:12px 0 0;padding:0 0 0 12px;border-left:2px solid rgba(223,191,123,.22);min-height:42px;transition:opacity .16s ease,transform .16s ease}
.yadam-reader-v3 .killer01-ghost small{display:block;margin:0 0 4px;font-size:9.5px;line-height:1.35;color:#8d826e}
.yadam-reader-v3 .killer01-ghost p{margin:0;font-size:14px;line-height:1.7;color:#d8d3ce;white-space:pre-wrap;overflow-wrap:anywhere}
.yadam-reader-v3 .killer01-ghost .killer01-caret{display:inline-block;width:1px;height:1em;margin-left:2px;vertical-align:-.12em;background:#c4a76e;animation:killer01Blink .72s steps(1,end) infinite}
.yadam-reader-v3 .killer01-ghost.is-erasing p{color:#9d9692}
.yadam-reader-v3 .killer01-ghost.is-done{opacity:0;transform:translateY(-2px)}
@keyframes killer01Blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.yadam-reader-v3 .killer01-ghost .killer01-caret{animation:none}}

/* Reserve the initial viewport for main content; footer stays after the content. */
#app{min-height:calc(100vh - 100px)}
@media(max-width:760px){#app{min-height:calc(100vh - 98px)}}
/* Status occupies its own row: text updates cannot redistribute action buttons. */
.reader-paper .composer-bottom{flex-wrap:wrap}
.reader-paper .composer-bottom #draftStatus{flex:0 0 100%;min-width:0;min-height:1.6em}

/* ★2026-09-25 — 카드 inline 「background:색」 줄임말이 background-size 를 auto 로 되돌려
   ★1086x1448 표지가 ★원본 크기로 박혀 왼쪽 위 한 귀퉁이만 보였다. 그림이 붙은 카드만 덮는다 */
.classic-cover.has-cover{ background-size:cover !important; background-position:center 30% !important; }

@media (max-width: 767px) {
  .phone-sticky-start {
    display: block;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    padding: 15px 20px;
    background: rgba(32, 27, 41, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    z-index: 100;
  }
  .phone-sticky-start .sticky-info {
    margin: 0 0 8px; text-align: center;
    font-size: 13px; color: var(--muted, #a99ab9);
  }
  .phone-sticky-start .primary {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
  }
  .profile-picture { max-width: 100%; padding: 0; margin: 0; }
  .profile-picture .portrait { aspect-ratio: 3/4 !important; border-radius: 0; }
  .profile { gap: 15px; padding-bottom: 80px; }
  .desktop-lore { display: none; }
  .mobile-lore { display: block; border-top: 1px solid var(--line); padding-top: 15px; margin-top: 20px; }
  .mobile-lore summary { font-weight: bold; cursor: pointer; padding: 10px 0; color: var(--gold); }
  .mobile-lore .bio-block { margin-top: 15px; }
}
@media (min-width: 768px) {
  .phone-sticky-start { display: none; }
  .mobile-lore { display: none; }
}

@media(max-width:767px) {
  .mobile-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #efe5f7;
    font-size: 24px;
    cursor: pointer;
    padding: 4px;
  }
  body:not(.chat-active) .section-head { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; }
  .search-wrap {
    display: none; /* hidden by default, shown by click */
    width: 100%;
  }
  body:not(.chat-active) .hero { min-height: 120px !important; margin-bottom: 8px !important; padding: 12px 16px !important; }
  body:not(.chat-active) .hero p { display: none !important; }
  body:not(.chat-active) .hero h1 { font-size: 22px !important; margin-bottom: 5px !important; }
  body:not(.chat-active) .hero .eyebrow { font-size: 11px !important; margin-bottom: 4px !important; }
  body:not(.chat-active) .hero .primary { min-height: 32px !important; padding: 6px 12px !important; font-size: 13px !important; }

  body:not(.chat-active) .section-head-text { display: contents !important; }
  body:not(.chat-active) .section-head { gap: 6px !important; margin: 4px 0 !important; }
  body:not(.chat-active) .section-head-text > div > p { display: none !important; }
  body:not(.chat-active) .section-head-text > div { max-width: calc(100% - 40px); }
  body:not(.chat-active) .section-head h2 { font-size: 18px !important; margin: 0 !important; }

  body:not(.chat-active) .filters { margin-bottom: 8px !important; }
}
@media(min-width:768px) {
  .mobile-search-btn { display: none !important; }
  .section-head-text { display: contents; }
}