@import url("https://hangeul.pstatic.net/hangeul_static/css/maru-buri.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* 11-03 슈아 「비전·사명·협업 창도 말씀 화면처럼 통일 · 크림노랑끼 · 네이비 위주 ✗」
   = 소개(index) · 후원(support) 공용 덧옷 · 원래 about.css·페이지 style 은 그대로 두고 맨 뒤에서 덮음
   결 = docs/product/THE_HELD_화면결.md (푸른 흰빛 바탕 · 애쉬 유리 · 차콜 글자 · 신호등) · 글·순서·기능 그대로 */
:root{
  --paper:#F3F6FB;--paper-2:#EAF0F8;--ink:#41454D;--ink-2:#4A4F59;--muted:#6E7178;--soft:#8A93A3;
  --accent:#DEE9F5;--accent-2:#EEF4FA;--accent-deep:#C5D3E4;--gold:#8A93A3;
  --line:#D5DCE5;--line-2:#E3E8EE;
  /* 11-03 슈아 「소개 · 후원 페이지 = 마루부리 + 프리텐다드 · 앱 안 = 프리텐다드」 (고운바탕 ✗) */
  --serif:"MaruBuri","Noto Serif KR",serif;--sans:"Pretendard Variable","Pretendard",-apple-system,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  --shadow:0 12px 36px rgba(65,69,77,.08);--shadow-s:0 4px 14px rgba(65,69,77,.06);
  --ash-btn:var(--ha-btn,rgba(206,214,225,.6));--ash-chip:var(--ha-chip,rgba(220,227,236,.85));--ash-card:var(--ha-card,rgba(255,255,255,.5));
}
body{background:linear-gradient(160deg,#F3F6FB,#EAF0F8) fixed;color:var(--ink)}

/* 머리 = 우윳빛 유리 + 신호등(빨강 = 닫기 · about-ash.js) */
.top{background:rgba(243,246,251,.72);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border-bottom:0}
.top .wrap{justify-content:flex-start}.top .nav{margin-left:auto}
.hb-lights{display:flex;gap:6px;align-items:center;flex:none}.hb-lights>*{width:12px;height:12px;border-radius:50%;display:block;border:0;padding:0;box-shadow:none}
.hb-lights>:nth-child(1){background:#FF5F57;cursor:pointer}.hb-lights>:nth-child(2){background:#FEBC2E}.hb-lights>:nth-child(3){background:#C9CED8}
.wordmark{color:var(--ink)}

/* 단추 · 칩 = 애쉬 유리(네이비 채움 ✗) */
.btn,.nav .cta,.chip.dark,.amts button[aria-pressed=true],.send .kp,.skip{background:var(--ash-btn);color:var(--ink);border:1px solid rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 2px 8px rgba(65,69,77,.08)}
.btn:hover,.nav .cta:hover,.send .kp:hover{background:var(--ash-chip);color:var(--ink)}
.amts button[aria-pressed=true]{background:var(--ash-chip);box-shadow:inset 0 0 0 1.5px rgba(65,69,77,.32)}
.btn.ghost,.btn.line{background:var(--ash-card)}

/* 카드 = 우윳빛 유리 */
.card,.note-card,dialog.sheet{background:var(--ash-card);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(255,255,255,.85);box-shadow:var(--shadow-s)}
dialog.sheet{background:rgba(250,251,253,.97)}

/* 짙은 띠·카드(옛 네이비 바탕) = 말씀 창 첫 카드 결 그라데이션 · 글자 차콜 */
.band,.foot,.card.dark,.demo,.engine-core,.power .mid,.vf .stage.next .frame{
  background:linear-gradient(150deg,rgba(222,233,245,.92),rgba(255,255,255,.55) 62%,rgba(208,223,240,.7));color:var(--ink);border-color:rgba(255,255,255,.9)}
.band,.foot{border-top:1px solid rgba(255,255,255,.85);border-bottom:1px solid rgba(255,255,255,.85)}
.band .desc,.band .muted,.card.dark .desc,.card.dark .muted,.demo .pron,.demo ol li span,.demo .langs,.power .mid p,
.foot p,.foot .bottom,.foot .biz{color:var(--muted)}
.band .body,.engine-core .flow{color:var(--ink)}
.foot .wordmark,.foot .links a,.engine-core .badge b{color:var(--ink)}
.band .textlink{border-color:var(--ink)}
.band details,.band details:last-of-type{border-color:var(--line)}
.foot .links a{border-bottom-color:rgba(65,69,77,.35)}.foot .bottom{border-top-color:var(--line)}
.demo .chip,.engine-core .chip{background:var(--ash-btn);border-color:rgba(255,255,255,.9);color:var(--ink)}

/* 후원 첫 화면 구름 = 크림 덮개 → 푸른 흰빛 */
.hero.sup{background:linear-gradient(180deg,rgba(243,246,251,.2),rgba(243,246,251,.92) 70%,#F3F6FB),url("support-assets/the-held-clouds.png") center top/cover no-repeat}

:where(a,summary,button,input):focus-visible{outline-color:rgba(65,69,77,.55)}

/* 옛 네이비 위 하늘색 글자(--accent) = 밝은 바탕에선 안 보임 → 보조 차콜 */
.band .quote cite,.card.dark .eyebrow,.band .eyebrow,.band summary::after,.foot .wordmark small,.foot .en,
.demo .eyebrow,.demo .play,.demo ol li b,.engine-core .flow i,.power .mid b,.power .mid small,.vf .stage.next .frame,.foot.sup .tag{color:var(--muted)}
.band .quote{border-color:var(--line)}.engine-core .badge{border-color:var(--line)}
[style*="color:rgba(251,250,246"]{color:var(--muted)!important}/* 글 안 옛 크림 글자색 2곳 */

/* 11-03 슈아 「검색창 알약을 쓰던지 · 로고는 밑에 페이지에 연하게 바탕으로 · 홈 화면 배경 로고처럼 은은하게」 */
.top .wordmark{display:none}
.top .hb-find{position:relative;flex:1 1 220px;min-width:0;max-width:360px;display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:19px;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border:1px solid rgba(255,255,255,.85);box-shadow:0 4px 14px rgba(65,69,77,.07);color:var(--ink);cursor:text}
.top .hb-find svg{width:16px;height:16px;flex:none;color:var(--muted)}.top .hb-find input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:13px;color:inherit;outline:0}
body::before{content:"";position:fixed;left:50%;top:54%;width:min(78vw,560px);aspect-ratio:1;transform:translate(-50%,-50%);background:url("/brand/dee9f5/app/logo-mark.png") center/contain no-repeat;opacity:.05;pointer-events:none;z-index:-1}
@media (max-width:640px){.top .hb-find{flex-basis:auto;max-width:none}}