/* 配套站:象牙底 + 墨色 + 淡杏点缀,衬线标题,大留白,极细颗粒。
   刻意只做一种外观(与 iOS app 的纸面感一致),不跟随深色模式。
   零外部字体:全部走系统字体栈,网站不向任何第三方发请求。 */
:root{
  --bg:#F7F4EF; --bg-2:#EFEAE2; --ink:#1B1A18; --body:#4A4640; --sub:#857E75;
  --accent:#C9A48C; --accent-ink:#9C7358;
  --line:rgba(27,26,24,.14); --line-soft:rgba(27,26,24,.07);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"AppleMyungjo","Nanum Myeongjo","Hiragino Mincho ProN","Yu Mincho","Songti SC","Noto Serif CJK KR",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Helvetica Neue","Segoe UI",Roboto,"Malgun Gothic","Hiragino Sans","PingFang SC","Microsoft YaHei","Noto Sans CJK KR",sans-serif;
  color-scheme:light;
}
:lang(ko){--serif:"Iowan Old Style","Palatino Linotype",Georgia,"AppleMyungjo","Nanum Myeongjo","Noto Serif CJK KR",serif}
:lang(ja){--serif:"Iowan Old Style","Palatino Linotype",Georgia,"Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Helvetica Neue","Yu Gothic",Meiryo,"Noto Sans CJK JP",sans-serif}
:lang(zh-CN){--serif:"Iowan Old Style","Palatino Linotype",Georgia,"Songti SC","STSong","Noto Serif CJK SC",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei","Noto Sans CJK SC",sans-serif}
:lang(zh-Hant){--serif:"Iowan Old Style","Palatino Linotype",Georgia,"Songti TC","PMingLiU","Noto Serif CJK TC",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang TC","Helvetica Neue","Microsoft JhengHei","Noto Sans CJK TC",sans-serif}
:lang(th){--sans:-apple-system,BlinkMacSystemFont,"Thonburi","Helvetica Neue","Leelawadee UI","Noto Sans Thai",sans-serif}
:lang(hi){--sans:-apple-system,BlinkMacSystemFont,"Kohinoor Devanagari","Helvetica Neue","Nirmala UI","Noto Sans Devanagari",sans-serif}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.8; letter-spacing:.01em; overflow-x:clip; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
:focus-visible{outline:1.5px solid var(--accent-ink); outline-offset:3px}

.grain{position:fixed; inset:0; pointer-events:none; z-index:20; opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px}
.wrap{max-width:1120px; margin:0 auto; padding-left:28px; padding-right:28px}
.narrow{max-width:720px}

/* 页眉 */
header.site .bar{display:flex; align-items:center; gap:18px; padding-block:24px}
.brand{font-family:var(--serif); font-size:25px; line-height:1; text-decoration:none; letter-spacing:.005em}
.brand small{font-family:var(--sans); font-size:11.5px; color:var(--sub); margin-left:8px; letter-spacing:.1em; vertical-align:2px}
.spacer{flex:1}
.hnav{font-size:13px; color:var(--sub); text-decoration:none}
.hnav:hover{color:var(--ink)}
.lang select{appearance:none; -webkit-appearance:none; background:transparent; border:0; border-bottom:.5px solid var(--line); border-radius:0; padding:4px 16px 4px 2px; font:inherit; font-size:12.5px; color:var(--sub); cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--sub) 50%),linear-gradient(135deg,var(--sub) 50%,transparent 50%);
  background-position:calc(100% - 7px) 55%,calc(100% - 3px) 55%; background-size:4px 4px; background-repeat:no-repeat}

/* 通用标题 */
.kicker{font-size:11.5px; letter-spacing:.24em; color:var(--sub); margin:0 0 20px}
.kicker::before{content:""; display:inline-block; width:22px; height:.5px; background:var(--accent-ink); vertical-align:middle; margin-right:12px}
:lang(ko) .kicker,:lang(ja) .kicker,:lang(zh-CN) .kicker,:lang(zh-Hant) .kicker,:lang(th) .kicker,:lang(hi) .kicker{letter-spacing:.14em}
h1,h2,h3{font-family:var(--serif); font-weight:400; overflow-wrap:break-word}
/* 韩语按词换行;日文/中文没有空格,keep-all 会让整句无法折行(390 宽溢出),只给 ko 用 */
:lang(ko) :is(h1,h2,h3,p,li){word-break:keep-all; overflow-wrap:anywhere}
:lang(ja) :is(h1,h2,h3,p,li),:lang(zh-CN) :is(h1,h2,h3,p,li),:lang(zh-Hant) :is(h1,h2,h3,p,li){line-break:strict}

/* 首屏 */
.hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:72px; align-items:center; padding-block:32px 96px}
.hero h1{font-size:clamp(38px,5.2vw,66px); line-height:1.16; letter-spacing:-.005em; margin:0 0 28px}
:lang(ko) .hero h1,:lang(ja) .hero h1,:lang(zh-CN) .hero h1,:lang(zh-Hant) .hero h1{line-height:1.34; font-size:clamp(33px,4.5vw,56px)}
/* 泰文/梵文有上下附标,标题行高放宽,避免裁切 */
:lang(th) :is(h1,h2,h3),:lang(hi) :is(h1,h2,h3){line-height:1.45}
:lang(th) .hero h1,:lang(hi) .hero h1{font-size:clamp(32px,4.4vw,54px)}
.lead{font-size:16px; line-height:1.95; color:var(--body); max-width:29em; margin:0 0 40px}
.store-row{display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px}
.store{display:inline-flex; align-items:center; gap:14px; background:var(--ink); color:var(--bg); text-decoration:none; border-radius:999px; padding:15px 26px 15px 22px; transition:transform .2s ease, background .2s}
.store:hover{background:#000; transform:translateY(-1px)}
.store[data-soon="1"]{cursor:default}
.store[data-soon="1"]:hover{transform:none; background:var(--ink)}
.store svg{width:18px; height:18px; flex:none}
.store b{font-weight:500; font-size:16px; letter-spacing:.02em}
.soon{font-size:12px; letter-spacing:.08em; color:var(--accent-ink); display:inline-flex; align-items:center; gap:8px}
.soon::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent)}
.store[data-soon="0"] + .soon{display:none}
.note{display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--sub); margin:26px 0 0; max-width:30em; line-height:1.7}
.note svg{flex:none; width:14px; height:14px; margin-top:3px}
.hero-fig{margin:0; position:relative}
.hero-fig img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:2px; box-shadow:0 40px 70px -40px rgba(40,28,18,.4)}
.hero-fig::after{content:""; position:absolute; left:-18px; bottom:-18px; width:42%; height:38%; border-left:.5px solid var(--accent); border-bottom:.5px solid var(--accent); pointer-events:none}

/* 区块 */
.block{padding-block:88px; border-top:.5px solid var(--line)}
.block-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:40px; margin-bottom:56px; align-items:end}
.block-head h2{font-size:clamp(28px,3.4vw,40px); line-height:1.3; margin:0}
.block-head .kicker{margin:0 0 6px}

.features{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px}
.features .n{font-family:var(--serif); font-style:italic; font-size:15px; color:var(--accent-ink)}
.features h3{font-size:24px; line-height:1.3; margin:8px 0 10px}
.features p{margin:0; color:var(--body); font-size:14.5px; line-height:1.9}
.features > div{padding-top:22px; border-top:.5px solid var(--line-soft)}

.how{background:var(--bg-2)}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.steps li{background:var(--bg); padding:32px 28px 34px; border-radius:2px}
.steps .ic{width:40px; height:40px; color:var(--ink); margin-bottom:26px}
.steps .ic svg{width:40px; height:40px}
.steps .num{font-family:var(--serif); font-size:40px; line-height:1; color:var(--accent); float:right; margin-top:-2px}
.steps h3{font-size:22px; line-height:1.35; margin:0 0 10px}
.steps p{margin:0; color:var(--body); font-size:14.5px; line-height:1.9}

/* 文档页 */
.doc{padding-block:40px 96px}
.doc h1{font-size:clamp(34px,5.4vw,52px); line-height:1.25; margin:10px 0 10px}
.doc .date{font-size:13px; color:var(--sub); margin:0 0 44px; letter-spacing:.04em}
.doc .lead{margin-bottom:28px}
.doc section{border-top:.5px solid var(--line); padding-block:28px}
.doc section h2{font-size:21px; line-height:1.4; margin:0 0 10px}
.doc section p{margin:.35em 0; color:var(--body); overflow-wrap:anywhere}
.doc section ul{margin:.4em 0 0; padding-left:1.1em; color:var(--body)}
.doc section li{margin:.45em 0; overflow-wrap:anywhere}
.doc section li::marker{color:var(--accent-ink)}
.doc a{text-decoration-color:var(--accent); text-underline-offset:3px}
.doc .qa h2{font-size:20px}
.mail-btn{display:inline-flex; align-items:center; gap:10px; margin-top:36px; border:.5px solid var(--ink); border-radius:999px; padding:12px 22px; text-decoration:none; font-size:14px}
.mail-btn:hover{background:var(--ink); color:var(--bg)}

/* 页脚 */
footer.site{border-top:.5px solid var(--line)}
.ft{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr); gap:28px 40px; padding-block:48px 56px; font-size:13px; color:var(--sub)}
.ft-id{display:flex; flex-direction:column; gap:4px}
.ft-brand{font-family:var(--serif); font-size:22px; color:var(--ink)}
.ft nav{display:flex; flex-direction:column; gap:6px}
.ft a{text-decoration:none}
.ft a:hover{color:var(--ink)}
.ft-social span{color:var(--ink)}
.ft-mail,.ft-rights{grid-column:1 / -1; margin:0}
.ft-mail{padding-top:20px; border-top:.5px solid var(--line-soft)}
.ft-mail a{color:var(--ink); overflow-wrap:anywhere}
.ft-rights{font-size:11.5px; letter-spacing:.05em}

@media (max-width:880px){
  .hero{grid-template-columns:1fr; gap:48px; padding-block:12px 72px}
  .hero-fig::after{left:-10px; bottom:-10px}
  .block{padding-block:64px}
  .block-head{grid-template-columns:1fr; gap:6px; margin-bottom:36px}
  .features,.steps{grid-template-columns:1fr; gap:28px}
  .steps{gap:14px}
  .ft{grid-template-columns:1fr 1fr}
  .ft-id{grid-column:1 / -1}
}
@media (max-width:440px){
  .wrap{padding-left:20px; padding-right:20px}
  header.site .bar{padding-block:18px; gap:14px}
  .store-row{flex-direction:column; align-items:flex-start}
  .store{width:100%; justify-content:center}
  .soon{align-self:center}
  .steps li{padding:26px 22px 28px}
}

/* 角色 —— 首页精选板块 + /characters 总页。
   卡片只有「浅象牙渐变底的缩略图 + 名字 + 분류/키 + 한 줄」,不加阴影不加悬浮花活。
   分类筛选是纯 CSS(隐藏的 radio + 兄弟选择器),没有 JS 也能筛。 */
.chars-block .block-head{align-items:start}
.chars-block .block-head .kicker{margin-top:14px}
.chars-lead{font-size:15px; line-height:1.9; color:var(--body); max-width:32em; margin:14px 0 0}
.char-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:44px 28px}
.char{margin:0; min-width:0}
.char-img{background:linear-gradient(170deg,#FCFAF6,#EFE9E0); border:.5px solid var(--line-soft); border-radius:2px; overflow:hidden; aspect-ratio:4/5}
.char-img img{width:100%; height:100%; object-fit:cover}
.char-name{font-size:22px; line-height:1.3; margin:16px 0 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px}
.char-name small{font-family:var(--sans); font-size:11px; letter-spacing:.1em; color:var(--sub); font-weight:400}
.char-meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:7px 0 0; font-size:11.5px; color:var(--sub); letter-spacing:.06em}
.char-tag{border:.5px solid var(--line); border-radius:999px; padding:2px 10px; color:var(--accent-ink)}
.char-p{margin:9px 0 0; font-size:13.5px; line-height:1.85; color:var(--body)}
.char-more{margin:52px 0 0}
.more-btn{display:inline-flex; align-items:center; gap:10px; border:.5px solid var(--ink); border-radius:999px; padding:12px 26px; text-decoration:none; font-size:14px}
.more-btn::after{content:"→"; color:var(--accent-ink)}
.more-btn:hover{background:var(--ink); color:var(--bg)}
.more-btn:hover::after{color:var(--bg)}
.char-note{margin:34px 0 0; font-size:11.5px; letter-spacing:.04em; color:var(--sub)}

/* 分类筛选 */
.char-filter{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 34px}
.char-filter input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.char-filter label{border:.5px solid var(--line); border-radius:999px; padding:7px 18px; font-size:12.5px; color:var(--sub); cursor:pointer; letter-spacing:.06em; transition:background .18s, color .18s}
.char-filter label:hover{color:var(--ink)}
.char-filter input:checked + label{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.char-filter input:focus-visible + label{outline:1.5px solid var(--accent-ink); outline-offset:3px}
/* radio 在 .char-filter 里、网格是它的兄弟,只能用 :has() 从容器往下筛。
   不支持 :has() 的老浏览器就是「全部显示」—— 内容一张不少,只是筛选不生效。 */
.chars:has(#cf-mood:checked) .char:not([data-tag="mood"]),
.chars:has(#cf-classic:checked) .char:not([data-tag="classic"]),
.chars:has(#cf-daily:checked) .char:not([data-tag="daily"]){display:none}

/* /characters 总页 */
.chars-page{padding-block:40px 96px}
.chars-page h1{font-size:clamp(34px,5.4vw,52px); line-height:1.25; margin:10px 0 12px}
.chars-page .lead{margin-bottom:40px}

@media (max-width:1000px){
  .char-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 22px}
}
@media (max-width:700px){
  .char-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 16px}
  .char-name{font-size:19px}
  .char-p{font-size:12.5px; line-height:1.8}
  .char-more{margin-top:40px}
  .more-btn{width:100%; justify-content:center}
}

/* ── 阿拉伯语 / RTL ──────────────────────────────────────
   1) 阿拉伯字母是连写的,letter-spacing 会把词拆成散字母 —— 所有字距一律归零;
   2) 方向相关的 margin / padding / float / 箭头 逐条镜像(项目里用的是物理属性,不是逻辑属性);
   3) 字体栈换成系统阿拉伯字体,仍然零外部请求。 */
:lang(ar){
  --serif:"Times New Roman",Georgia,"Geeza Pro","Al Bayan","Baghdad","Noto Naskh Arabic","Traditional Arabic",serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Arabic","Geeza Pro","Helvetica Neue","Segoe UI","Noto Sans Arabic","Arabic Typesetting",sans-serif;
}
[dir=rtl] body,
[dir=rtl] :is(.kicker,.brand small,.store b,.soon,.doc .date,.ft-rights,.char-name small,.char-meta,.char-filter label,.char-note){letter-spacing:0}
/* 阿拉伯语标题没有大写概念,行高比拉丁文需要更宽,避免上下附标被裁 */
[dir=rtl] :is(h1,h2,h3){line-height:1.4}
[dir=rtl] .hero h1{line-height:1.35; font-size:clamp(33px,4.6vw,58px)}

[dir=rtl] .brand small{margin-left:0; margin-right:8px}
[dir=rtl] .kicker::before{margin-right:0; margin-left:12px}
[dir=rtl] .lang select{padding:4px 2px 4px 16px;
  background-position:7px 55%,3px 55%;
  background-image:linear-gradient(-45deg,transparent 50%,var(--sub) 50%),linear-gradient(-135deg,var(--sub) 50%,transparent 50%)}
[dir=rtl] .hero-fig::after{left:auto; right:-18px; border-left:0; border-right:.5px solid var(--accent)}
[dir=rtl] .steps .num{float:left}
[dir=rtl] .doc section ul{padding-left:0; padding-right:1.1em}
[dir=rtl] .more-btn::after{content:"←"}
@media (max-width:880px){
  [dir=rtl] .hero-fig::after{left:auto; right:-10px}
}