/* 조각-브라우저홈.css — 대문 전용 보강(브라우저홈.css 뒤 마지막 링크). 색·둥글기는 var만, hex 0건 */

/* 왕관 라이트/다크 교체 */
.bh .crown.dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .bh .crown.light{display:none}
  :root:not([data-theme="light"]) .bh .crown.dark{display:inline-block}
}
:root[data-theme="dark"] .bh .crown.light{display:none}
:root[data-theme="dark"] .bh .crown.dark{display:inline-block}

/* 헤더 가운데·간격 */
.bh .dm-top{align-items:center;text-align:center;padding-top:var(--dm-sp-7)}
.bh h1.greet{max-width:100%;overflow-wrap:anywhere}
.bh p.author{display:block;color:var(--text2)}
.bh p.sub,.bh p.tag{max-width:100%;overflow-wrap:anywhere}

/* 옴니 입력창 폭 */
.bh .omni{max-width:100%}
.bh .omni input{min-width:0}

/* 타일 줄바꿈 */
.bh .tiles{flex-wrap:wrap;justify-content:center;max-width:100%}
.bh .tile.dark .ic2 svg.seven{width:56px;height:56px}
.bh .tile .ic2 img{display:block}
.bh .tile:hover .ic2{border-color:var(--accent)}

/* 히어로 카드 → 밝은 카드 */
.dm-card-hero{background:var(--input);color:var(--text);border:1px solid var(--border);border-radius:22px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.dm-card-hero .dm-sub,
.dm-card-hero .dm-meta,
.dm-card-hero .dm-base-desc{color:var(--text2)}
.dm-card-hero .dm-title{color:var(--text)}
.dm-card-hero .dm-label{color:var(--accent)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .dm-card-hero .dm-sub,
  :root:not([data-theme="light"]) .dm-card-hero .dm-meta,
  :root:not([data-theme="light"]) .dm-card-hero .dm-base-desc{color:var(--text2)}
}
:root[data-theme="dark"] .dm-card-hero .dm-sub,
:root[data-theme="dark"] .dm-card-hero .dm-meta,
:root[data-theme="dark"] .dm-card-hero .dm-base-desc{color:var(--text2)}
.dm-card-hero .dm-chip{background:var(--bg);color:var(--text);border-color:var(--border)}
.dm-card-hero .dm-chip .dm-ico{color:var(--accent)}

/* 상담·집사 카드 안 입력 */
#counselCard,#butlerCard{max-width:100%;box-sizing:border-box;overflow-wrap:anywhere}
#counselCard textarea,#counselCard input,
#butlerCard input,#butlerCard textarea,#butlerCard select,#butlerOpts button{
  background:var(--input);border:1px solid var(--border);border-radius:18px;color:var(--text);max-width:100%;box-sizing:border-box}
#butlerOpts button{width:100%;text-align:left;padding:var(--dm-sp-3);overflow-wrap:anywhere;cursor:pointer}
#butlerOpts button:hover{border-color:var(--accent)}
#counselBtn{background:var(--accent);color:var(--chip);border-radius:18px}
.cn-u{color:var(--chip)}

/* 모바일 넘침 방지 */
.bh .dm-wrap,.bh .dm-grid{max-width:100%;box-sizing:border-box}

/* 헤더 간격 — 브라우저 값(h1 8px·sub 28px·tiles 34px)이 그대로 쓰이도록 열 gap 제거 */
.bh .dm-top{gap:0}
.bh .dm-top>.card,.bh .dm-top>.omni{margin-top:var(--dm-sp-4)}
.bh .dm-top>.omni{margin-bottom:0}
.bh .dm-top>.crown{margin-top:var(--dm-sp-4)}

/* 어두운 배경 위 글자 대비 — --dm-on-accent 가 chip(진갈색)으로 매핑되므로 선택칩은 bg 색 글자 */
.dm-chip.on,.dm-chip[aria-selected="true"]{color:var(--bg)}
.dm-page a.dm-chip.on{color:var(--bg)}

/* 상담·집사 카드 — 브라우저처럼 좁게 가운데 모음 */
#counselCard,#butlerCard{width:min(720px,92vw);margin-left:auto;margin-right:auto}