:root{
  color-scheme: light dark;
  /* 중립 */
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F6F3F7; --surface-3:#EFEAF1;
  --line:#E9E4EC; --line-strong:#D8D0DD;
  --ink:#1B1820; --ink-2:#3A3542; --ink-3:#5E5866; --ink-4:#8C8594; /* ink-4는 글자 금지 */
  /* 강조 (앱 아이콘 #B662C0 / 앱 UI #9F5AC1) */
  --accent:#8A44AE; --accent-press:#7E3BA3; --accent-brand:#B662C0; /* brand는 아이콘·장식 전용 */
  --accent-soft:#F3E8F7; --accent-on-soft:#6F2E92; --on-accent:#FFFFFF; --focus:#8A44AE;
  --success:#1E8E5A;
  /* 파생 */
  --cta-bg:#8A44AE; --cta-fg:#FFFFFF; --cta-fg-2:#F3E8F7; --cta-btn-bg:#FFFFFF; --cta-btn-fg:#6F2E92;
  --toast-bg:#1B1820; --toast-fg:#FFFFFF;
  --inverse-bg:#1B1820; --inverse-fg:#FFFFFF; --inverse-muted:#CFC8D6;
  --header-bg:#FFFFFF;
  /* base.css 스튜디오 줄 연결 */
  --ys-line:var(--line); --ys-muted:var(--ink-3); --ys-ink:var(--ink); --ys-container:1040px; --ys-gutter:var(--gutter);
  /* 글꼴 */
  --font-sans:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-glyph:"Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "Noto Sans JP", "Apple SD Gothic Neo", "Pretendard Variable", sans-serif;
  --font-math:"Cambria Math", "STIX Two Math", "Noto Sans Math", "Apple Symbols", "Segoe UI Symbol", serif;
  /* 타입 */
  --fs-display:clamp(30px, 1.6vw + 24px, 56px); --lh-display:1.3; --ls-display:-0.02em; --fw-display:800;
  --fs-h2:clamp(26px, 1.1vw + 22px, 40px); --lh-h2:1.35; --ls-h2:-0.015em; --fw-h2:700;
  --fs-h3:clamp(20px, 0.4vw + 18px, 24px); --lh-h3:1.4; --ls-h3:-0.01em; --fw-h3:700;
  --fs-lead:clamp(17px, 0.2vw + 16px, 19px); --lh-lead:1.65;
  --fs-body:16px; --lh-body:1.7; --fw-body:500;
  --fs-label:15px; --lh-label:1.4; --fw-label:600;
  --fs-caption:13px; --lh-caption:1.55; --fs-min:12px;
  --fs-glyph-chip:clamp(18px, 0.6vw + 16px, 24px);
  --fs-glyph-cell:clamp(20px, 0.8vw + 17px, 28px);
  --fs-glyph-hero:clamp(18px, 0.8vw + 15px, 26px);
  --fs-glyph-preview:clamp(28px, 1.6vw + 22px, 44px);
  --fs-font-sample:clamp(22px, 1.6vw + 16px, 40px);
  /* 간격 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px;
  --section-y:clamp(72px, 6vw + 48px, 144px);
  --gutter:clamp(20px, 3vw, 32px);
  --container:1040px; --container-wide:1200px; --measure:34em;
  /* 반경 */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:24px; --r-2xl:30px; --r-chip:22px; --r-pill:999px;
  /* 선·그림자 */
  --border:1px solid var(--line);
  --shadow-screen:0 0 18px rgba(27,24,32,.06);
  --shadow-float:0 8px 16px rgba(46,20,60,.10), 0 4px 8px rgba(46,20,60,.05);
  /* 동작 */
  --ease:var(--ys-ease-standard); --ease-out:var(--ys-ease-emphasized); --dur-fast:var(--ys-dur-micro); --dur:var(--ys-dur-micro); --dur-slow:var(--ys-dur-short);
  /* 터치 */
  --tap:44px; --btn-h:52px; --header-h:60px;
}
@media (min-width:1024px){ :root{ --r-chip:28px; --btn-h:56px; } }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#17141B; --surface:#1F1B24; --surface-2:#26212C; --surface-3:#2F2936;
    --line:#352F3C; --line-strong:#4A4352;
    --ink:#ECE8F0; --ink-2:#D6D0DC; --ink-3:#B0A8B8; --ink-4:#7D7586;
    --accent:#C58BDD; --accent-press:#D3A6E6; --accent-brand:#B662C0;
    --accent-soft:#33263B; --accent-on-soft:#E2C6EE; --on-accent:#17141B; --focus:#D3A6E6;
    --success:#4CC38A;
    --cta-bg:#C58BDD; --cta-fg:#17141B; --cta-fg-2:#3A2A44; --cta-btn-bg:#17141B; --cta-btn-fg:#ECE8F0;
    --toast-bg:#ECE8F0; --toast-fg:#17141B;
    --inverse-bg:#ECE8F0; --inverse-fg:#17141B; --inverse-muted:#5E5866;
    --header-bg:#17141B;
    --shadow-screen:0 0 0 1px #352F3C; --shadow-float:0 8px 24px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
    --bg:#17141B; --surface:#1F1B24; --surface-2:#26212C; --surface-3:#2F2936;
    --line:#352F3C; --line-strong:#4A4352;
    --ink:#ECE8F0; --ink-2:#D6D0DC; --ink-3:#B0A8B8; --ink-4:#7D7586;
    --accent:#C58BDD; --accent-press:#D3A6E6; --accent-brand:#B662C0;
    --accent-soft:#33263B; --accent-on-soft:#E2C6EE; --on-accent:#17141B; --focus:#D3A6E6;
    --success:#4CC38A;
    --cta-bg:#C58BDD; --cta-fg:#17141B; --cta-fg-2:#3A2A44; --cta-btn-bg:#17141B; --cta-btn-fg:#ECE8F0;
    --toast-bg:#ECE8F0; --toast-fg:#17141B;
    --inverse-bg:#ECE8F0; --inverse-fg:#17141B; --inverse-muted:#5E5866;
    --header-bg:#17141B;
    --shadow-screen:0 0 0 1px #352F3C; --shadow-float:0 8px 24px rgba(0,0,0,.45);
}

html { scroll-behavior:smooth; }
html.i18n-pending body { visibility:hidden; }
body { background:var(--bg); color:var(--ink); font:var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-sans); }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; }
button, input, textarea { min-width:0; }
button { border:0; }
ul, ol { padding:0; list-style:none; }
span, small, strong { word-break:keep-all; overflow-wrap:anywhere; }
.container { width:min(var(--container), 100% - 2*var(--gutter)); margin-inline:auto; }
section[id], #faq-keyboard { scroll-margin-top:calc(var(--header-h) + 16px); }
section:not(.hero,.trust) { padding-block:var(--section-y); }
h1 { font-size:var(--fs-display); line-height:var(--lh-display); letter-spacing:var(--ls-display); font-weight:var(--fw-display); }
h2 { font-size:var(--fs-h2); line-height:var(--lh-h2); letter-spacing:var(--ls-h2); font-weight:var(--fw-h2); }
h3 { font-size:var(--fs-h3); line-height:var(--lh-h3); letter-spacing:var(--ls-h3); font-weight:var(--fw-h3); }
.section-head { margin-bottom:32px; }
.section-head.is-center { text-align:center; }
.section-desc { font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--ink-3); max-width:var(--measure); margin-top:12px; }
.is-center .section-desc { margin-inline:auto; }
.icon-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:1em; height:1em; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }
.nowrap { white-space:nowrap; }
.btn-store, .btn-primary, .btn-tone, .btn-ghost, .btn-cta, .btn-share { display:inline-flex; justify-content:center; align-items:center; flex:none; gap:8px; white-space:nowrap; transition:background var(--dur) var(--ease), scale var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.btn-store, .btn-cta { min-height:var(--btn-h); padding:0 24px; border-radius:var(--r-pill); background:var(--ink); color:var(--bg); font-size:17px; font-weight:700; }
.btn-store .icon, .btn-cta .icon { width:20px; height:20px; }
.btn-store:hover { background:var(--ink-2); }
.btn-primary { min-height:52px; padding:0 24px; border-radius:var(--r-pill); background:var(--accent); color:var(--on-accent); font-size:17px; font-weight:700; }
.btn-primary:hover { background:var(--accent-press); }
.btn-tone { min-height:44px; padding:0 16px; border-radius:var(--r-xs); background:var(--accent-soft); color:var(--accent-on-soft); font-size:15px; font-weight:600; }
.btn-tone .icon, .btn-ghost .icon { width:16px; height:16px; }
.btn-tone:hover { filter:brightness(.97); }
.btn-ghost { min-height:44px; padding:0 18px; border-radius:var(--r-pill); border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2); font-size:15px; font-weight:600; }
.btn-ghost:hover { background:var(--surface-3); }
.wall-glyph, .maker__face, .maker__pick, .emote-value, #selected-expression, .glyph-cell, .empty-face, .dialog-face, #manual-copy-text { font-family:var(--font-glyph); font-weight:400; letter-spacing:0; word-break:keep-all; white-space:nowrap; }
#selected-expression, #manual-copy-text { white-space:normal; overflow-wrap:anywhere; }

.site-header { position:sticky; top:0; z-index:50; height:var(--header-h); background:var(--header-bg); border-bottom:1px solid transparent; transition:border-color var(--dur); }
.site-header.is-scrolled { border-bottom-color:var(--line); }
.header-inner { height:100%; display:flex; gap:8px; align-items:center; }
.brand { display:inline-flex; flex:none; gap:8px; align-items:center; min-height:44px; font-size:17px; font-weight:800; white-space:nowrap; }
.brand img { width:28px; height:28px; border-radius:8px; }
.studio-link { display:none; }
.header-actions { display:flex; gap:8px; align-items:center; margin-left:auto; }
.language-switch { display:inline-flex; flex:none; white-space:nowrap; gap:6px; align-items:center; justify-content:center; height:44px; min-width:44px; padding:0 12px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--surface); font-size:13px; font-weight:700; color:var(--ink-2); }
.language-switch .icon { width:16px; height:16px; }
.language-switch:hover { background:var(--surface-3); }
.header-get { display:flex; justify-content:center; align-items:center; height:44px; padding:0 16px; border-radius:var(--r-pill); background:var(--ink); color:var(--bg); font-size:15px; font-weight:700; white-space:nowrap; }
.header-get:hover { background:var(--ink-2); }
.menu-button { width:44px; height:44px; border-radius:var(--r-pill); background:transparent; display:grid; place-items:center; color:var(--ink); }
.menu-button .icon { width:22px; height:22px; }
.site-menu { position:fixed; top:var(--header-h); left:0; right:0; padding:8px var(--gutter) 16px; background:var(--header-bg); border-bottom:1px solid var(--line); box-shadow:var(--shadow-float); }
.site-menu a { display:flex; align-items:center; min-height:52px; font-size:17px; font-weight:600; border-bottom:1px solid var(--line); }
.site-menu a:last-child { border:0; }
.site-menu a[aria-current="location"] { color:var(--accent); text-decoration:underline 2px; text-underline-offset:6px; }
html.no-js .site-menu { display:none; }

.hero { padding-top:24px; padding-bottom:40px; }
.hero-inner { text-align:center; }
.hero-wall { height:104px; overflow:hidden; margin-bottom:24px; display:flex; flex-wrap:wrap; justify-content:center; align-content:center; gap:10px 18px; pointer-events:none; mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); }
.wall-glyph { font-size:var(--fs-glyph-hero); color:var(--ink-4); opacity:.55; }
.wall-glyph:nth-child(n+15) { display:none; }
.hero h1 { max-width:13em; margin-inline:auto; }
.hero-desc { max-width:26em; margin:16px auto 0; font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--ink-3); }
.store-row { margin-top:28px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.store-row .btn-store { width:100%; max-width:340px; }
.hero-terms { margin-top:14px; font-size:13px; font-weight:500; color:var(--ink-3); }
.quick-more { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:8px; font-size:15px; font-weight:600; color:var(--accent); }
.quick-more .icon { width:16px; height:16px; }

.trust { border-block:1px solid var(--line); padding:20px 0; }
.trust-stats { display:grid; grid-template-columns:repeat(3,1fr); text-align:center; }
.trust-stats > div { display:flex; flex-direction:column-reverse; align-items:center; }
.trust-stats > div+div { border-left:1px solid var(--line); }
.trust dt { font-size:13px; font-weight:500; color:var(--ink-3); }
.trust dd { display:flex; align-items:center; gap:4px; font-size:22px; font-weight:800; white-space:nowrap; }
.star { fill:var(--accent-brand); stroke:none; }
.trust .star { width:16px; height:16px; }
.trust-source { display:flex; justify-content:center; align-items:center; gap:4px; min-height:44px; font-size:13px; color:var(--ink-3); text-decoration:underline; text-underline-offset:3px; }
.trust-source .icon { width:14px; height:14px; }

.playground, .taste, .reviews { background:var(--surface-2); }
.pg-layout { display:grid; gap:16px; }
.playground-panel { background:var(--surface); border-radius:var(--r-xl); border:var(--border); padding:20px; min-width:0; }
.playground-toolbar { display:flex; gap:8px; }
.search-field { flex:1; position:relative; min-width:0; height:52px; border-radius:var(--r-sm); background:var(--surface-2); border:1px solid transparent; }
.search-field:focus-within { border-color:var(--accent); background:var(--surface); }
.search-field > .icon { position:absolute; top:15px; left:16px; width:20px; height:20px; color:var(--ink-3); }
.search-field input { width:100%; height:100%; padding:0 52px 0 48px; border:0; background:transparent; font-size:16px; }
.search-field input::placeholder { color:var(--ink-3); opacity:1; }
input::-webkit-search-cancel-button { display:none; }
.search-clear { position:absolute; right:4px; top:3px; width:44px; height:44px; border-radius:var(--r-pill); background:transparent; display:grid; place-items:center; }
.search-clear .icon { width:20px; height:20px; }
.search-clear:hover { background:var(--surface-3); }
.search-field kbd { display:none; }
.saved-filter { height:52px; padding:0 14px; border-radius:var(--r-sm); border:var(--border); background:var(--surface); color:var(--ink-2); display:flex; align-items:center; gap:6px; font-size:15px; font-weight:600; white-space:nowrap; }
.saved-filter .icon { width:18px; height:18px; }
.count { min-width:22px; height:22px; display:grid; place-items:center; border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent-on-soft); font-size:13px; font-weight:700; }
.saved-filter[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.saved-filter[aria-pressed="true"] .count { background:rgba(255,255,255,.22); color:inherit; }
.count.is-bumped { animation:bump var(--ys-dur-micro) var(--ys-ease-standard); }
@keyframes bump { 50% { transform:scale(1.25); } }
.filter-row { display:flex; gap:8px; margin-top:12px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; margin-inline:-20px; padding:0 20px 4px; }
.filter-row::-webkit-scrollbar, .screen-rail::-webkit-scrollbar { display:none; }
.filter-chip { min-height:44px; padding:0 16px; border-radius:var(--r-pill); background:var(--surface-2); color:var(--ink-2); font-size:15px; font-weight:600; flex:none; scroll-snap-align:start; white-space:nowrap; }
.filter-chip:hover { background:var(--surface-3); }
.filter-chip[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); }
.results-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:20px; font-size:13px; font-weight:600; color:var(--ink-3); }
.tap-hint { display:inline-flex; align-items:center; gap:4px; flex:none; }
.tap-hint .icon { width:16px; height:16px; }
.emoticon-grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.emote-card { display:inline-flex; align-items:center; max-width:100%; border:1px solid var(--line-strong); border-radius:var(--r-chip); background:var(--surface); overflow:hidden; transition:border-color var(--dur-fast), background var(--dur-fast); }
.emote-copy { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:64px; padding:10px 4px 10px 18px; background:none; border:0; text-align:left; color:var(--ink); }
.emote-copy:hover { background:var(--surface-2); }
.emote-value { order:0; font-size:var(--fs-glyph-chip); line-height:1.3; }
.emote-value.is-long { font-size:calc(var(--fs-glyph-chip)*.85); }
.emote-value.is-very-long { font-size:calc(var(--fs-glyph-chip)*.75); }
.emote-name { order:1; font-size:13px; font-weight:500; line-height:1.4; color:var(--ink-3); white-space:nowrap; }
.copy-label { order:1; display:none; }
.is-copied .copy-label { display:block; font-size:13px; font-weight:700; color:var(--accent); }
.is-copied .emote-name { display:none; }
.emote-copy > .icon { display:none; }
.save-button { flex:none; width:44px; height:44px; margin-right:6px; border-radius:var(--r-pill); background:transparent; display:grid; place-items:center; color:var(--ink-4); }
.save-button .icon { width:20px; height:20px; }
.save-button:hover { background:var(--surface-3); color:var(--ink-2); }
.save-button[aria-pressed="true"] .icon { color:var(--accent); fill:currentColor; }
.emote-card.is-copied { border-color:var(--accent); }
.emote-copy:focus-visible { outline-offset:-3px; border-radius:var(--r-chip); }
.save-button:focus-visible { outline-offset:-2px; }
.empty-state { text-align:center; padding:40px 16px; }
.empty-face { font-size:32px; color:var(--ink-4); }
.empty-state h3 { font-size:20px; margin-top:12px; }
.empty-state p { font-size:16px; color:var(--ink-3); margin-top:6px; }
.empty-state .btn-tone { margin-top:16px; }
.load-more-row { margin-top:20px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.sample-note { font-size:13px; color:var(--ink-3); text-align:center; }
.message-preview { padding:24px; background:var(--surface); border:var(--border); border-radius:var(--r-xl); }
#preview-label { display:inline-flex; gap:8px; align-items:center; font-size:15px; font-weight:700; color:var(--ink-2); }
#preview-label .icon { width:20px; height:20px; color:var(--accent-brand); }
.message-composer { margin-top:16px; background:var(--surface-2); border-radius:20px 20px 20px 6px; padding:16px 18px; }
.message-composer input { display:block; width:100%; min-height:44px; font-size:16px; font-weight:500; color:var(--ink); border:0; border-bottom:1px dashed var(--line-strong); padding:6px 0; background:transparent; }
.message-composer input:focus-visible { border-bottom:2px solid var(--accent); }
#selected-expression { display:block; margin-top:10px; font-size:var(--fs-glyph-preview); line-height:1.25; }
.copy-message { width:100%; margin-top:16px; }
.preview-hint { font-size:13px; color:var(--ink-3); text-align:center; margin-top:10px; }
.storage-note { margin-top:12px; font-size:13px; color:var(--ink-3); }
.noscript-note { margin-top:24px; font-size:15px; color:var(--ink-3); }

.rail-arrows { display:none; gap:8px; }
.rail-btn { width:44px; height:44px; border-radius:var(--r-pill); border:var(--border); background:var(--surface); color:var(--ink-2); display:grid; place-items:center; }
.rail-btn .icon { width:20px; height:20px; }
.rail-btn:hover { background:var(--surface-3); }
.rail-btn[disabled] { opacity:.4; cursor:default; }
.screen-rail { --rail-pad:max(var(--gutter), (100vw - var(--container))/2); margin-top:32px; display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:4px var(--rail-pad) 20px; scroll-padding-inline:var(--rail-pad); }
.screen-rail:focus-visible { outline-offset:-2px; }
.screen-card { flex:0 0 240px; scroll-snap-align:start; }
.screen-card img { width:100%; height:auto; border-radius:var(--r-xl); box-shadow:var(--shadow-screen); background:var(--surface-2); }
.screen-card figcaption { margin-top:12px; font-size:15px; font-weight:600; color:var(--ink-2); }
.rail-cta-row { margin-top:24px; text-align:center; }
.rail-cta { box-shadow:var(--shadow-float); }
.features > .container { border-top:1px solid var(--line); padding-top:var(--section-y); }
section.features { padding-top:0; }
.feature-list { display:grid; gap:40px; }
.feature-icon { width:44px; height:44px; border-radius:14px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; }
.feature-icon .icon { width:24px; height:24px; }
.feature h3 { margin-top:16px; }
.feature p { margin-top:8px; font-size:16px; line-height:1.7; color:var(--ink-3); max-width:var(--measure); }
.feature .btn-tone { margin-top:16px; }
.taste-sub { margin:32px 0 12px; font-size:17px; font-weight:700; color:var(--ink-2); }
.section-head + .taste-sub { margin-top:0; }
.font-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.font-card { display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:8px; min-height:112px; padding:16px 16px 16px 20px; border-radius:var(--r-chip); border:var(--border); background:var(--surface); color:var(--ink); text-align:left; transition:background var(--dur-fast) var(--ease),scale var(--dur-fast) var(--ease); }
.font-sample { font-family:var(--font-math); font-size:var(--fs-font-sample); line-height:1.2; white-space:nowrap; max-width:100%; overflow:hidden; }
.font-name { font-size:13px; font-weight:600; color:var(--ink-3); }
.font-card:hover { background:var(--surface-3); border-color:var(--line-strong); }
.font-card.is-inverse { background:var(--inverse-bg); color:var(--inverse-fg); border-color:var(--inverse-bg); }
.is-inverse .font-name { color:var(--inverse-muted); }
.font-card.is-inverse:hover { opacity:.92; }
.glyph-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(48px,1fr)); gap:1px; border:var(--border); border-radius:var(--r-md); background:var(--line); overflow:hidden; }
.glyph-cell { aspect-ratio:1; min-height:48px; background:var(--surface); font-size:var(--fs-glyph-cell); color:var(--ink); }
.glyph-cell:hover { background:var(--surface-3); }
.glyph-cell:focus-visible { outline-offset:-3px; }
.taste-note { margin-top:16px; font-size:13px; color:var(--ink-3); }
.steps { display:grid; gap:24px; }
.step { border-top:1px solid var(--line); padding-top:20px; }
.step-badge { display:inline-block; font-size:13px; font-weight:700; padding:4px 8px; border-radius:6px; background:var(--accent-soft); color:var(--accent-on-soft); }
.step h3 { margin-top:12px; font-size:20px; }
.step p { margin-top:6px; font-size:16px; color:var(--ink-3); }
.how-try { margin-top:32px; }
.text-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:15px; font-weight:600; color:var(--accent); }
.text-link .icon { width:16px; height:16px; }
.reviews-grid { display:grid; gap:12px; }
.review-card { position:relative; padding:20px; border:var(--border); background:var(--surface); border-radius:var(--r-md); }
.review-headline { font-size:18px; font-weight:700; }
.review-body { margin-top:8px; font-size:16px; color:var(--ink-3); }
.review-author { display:flex; align-items:center; gap:12px; margin-top:16px; }
.review-avatar { display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%; background:var(--accent-soft); color:var(--accent-on-soft); font-size:15px; font-weight:700; }
.review-author strong { display:block; font-size:15px; font-weight:600; }
.review-author small { display:block; font-size:13px; color:var(--ink-3); }
.card-source { position:absolute; inset:0; border-radius:inherit; }
.card-source:focus-visible { outline-offset:-2px; }
.review-card:has(.card-source:hover) { border-color:var(--line-strong); }
.review-invite { display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:24px; background:var(--accent-soft); border-radius:var(--r-md); }
.invite-rating { display:flex; align-items:baseline; gap:6px; color:var(--accent-on-soft); }
.invite-rating .star { width:24px; height:24px; }
.invite-rating strong { font-size:40px; font-weight:800; }
.invite-rating span { font-size:13px; font-weight:600; }
.review-invite h3 { font-size:20px; }
.review-invite small { font-size:13px; color:var(--ink-3); }
.review-note { margin-top:16px; font-size:13px; color:var(--ink-3); }
.faq-item { margin-bottom:12px; background:var(--surface-2); border-radius:var(--r-md); }
.faq-item summary { list-style:none; cursor:pointer; min-height:64px; padding:20px; display:grid; grid-template-columns:1fr 24px; grid-template-areas:"tag icon" "q icon"; gap:4px 12px; align-items:center; border-radius:inherit; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-tag { grid-area:tag; font-size:13px; font-weight:600; color:var(--accent); }
.faq-q { grid-area:q; font-size:17px; font-weight:600; }
.faq-item summary .icon { grid-area:icon; width:20px; height:20px; color:var(--ink-3); transition:transform var(--ys-dur-short) var(--ys-ease-move); }
.faq-item[open] summary .icon { transform:rotate(45deg); }
.faq-answer { padding:0 20px 20px; }
.faq-answer p { font-size:16px; line-height:1.7; color:var(--ink-3); }
.faq-answer p+p { margin-top:8px; }
.faq-answer a { color:var(--accent); text-decoration:underline; }
.faq-item summary:focus-visible { outline-offset:2px; }
.faq-help { margin-top:16px; }
.download-card { background:var(--cta-bg); color:var(--cta-fg); border-radius:var(--r-2xl); padding:48px 24px; }
.download-card h2 { font-weight:800; color:inherit; }
.dl-desc { margin-top:12px; font-size:17px; color:var(--cta-fg-2); }
#pricing { margin-top:8px; font-size:13px; color:var(--cta-fg-2); }
.store-icon-hint { margin-top:24px; display:flex; gap:12px; align-items:center; }
.store-icon-hint img { width:48px; height:48px; flex:none; border-radius:12px; box-shadow:0 0 0 1px rgba(255,255,255,.35); }
.store-icon-hint p { font-size:13px; color:var(--cta-fg-2); }
.store-icon-hint strong { display:block; font-size:15px; font-weight:700; color:var(--cta-fg); }
.store-icon-hint span { display:block; }
.dl-actions { margin-top:28px; display:flex; flex-direction:column; gap:12px; }
.dl-actions .btn-cta, .dl-actions .btn-share { width:100%; max-width:360px; }
.btn-cta { background:var(--cta-btn-bg); color:var(--cta-btn-fg); }
.btn-cta:hover { opacity:.92; }
.dl-other { font-size:15px; font-weight:600; }
.dl-other a { display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:3px; }
.btn-share { min-height:44px; padding:0 18px; border-radius:var(--r-pill); border:1.5px solid currentColor; background:transparent; color:var(--cta-fg); font-size:15px; font-weight:600; }
.btn-share .icon { width:18px; height:18px; }
.btn-share:hover { background:rgba(255,255,255,.12); }
.download-card :focus-visible { outline-color:var(--cta-fg); }
.site-footer { background:var(--surface-2); border-top:var(--border); }
.footer-main { padding:48px 0 32px; display:grid; gap:32px; }
.footer-app { display:flex; gap:10px; align-items:center; font-size:17px; font-weight:800; margin-bottom:12px; }
.footer-app img { width:40px; height:40px; border-radius:10px; }
.footer-label, .footer-location { font-size:13px; color:var(--ink-3); }
.footer-email { display:inline-flex; align-items:center; min-height:44px; font-size:15px; font-weight:600; color:var(--ink-2); }
.footer-col h2 { margin-bottom:4px; font-size:13px; font-weight:700; color:var(--ink-3); }
.footer-col a { display:flex; align-items:center; gap:6px; min-height:44px; font-size:15px; font-weight:500; color:var(--ink-2); }
.footer-col a:hover { color:var(--ink); text-decoration:underline; }
.footer-col .icon { width:14px; height:14px; }
.ys-studio a { min-width:44px; }
.back-to-top { position:fixed; z-index:55; right:max(16px,env(safe-area-inset-right)); bottom:calc(16px + env(safe-area-inset-bottom)); width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:var(--surface); border:var(--border); box-shadow:var(--shadow-float); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity var(--dur),visibility var(--dur),transform var(--dur); }
.back-to-top .icon { width:20px; height:20px; }
.back-to-top.is-visible { opacity:1; visibility:visible; transform:translateY(0); }
.toast { position:fixed; z-index:60; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); max-width:calc(100% - 32px); min-height:48px; padding:12px 20px; border-radius:var(--r-pill); display:flex; align-items:center; gap:8px; background:var(--toast-bg); color:var(--toast-fg); font-size:15px; font-weight:600; opacity:0; visibility:hidden; transform:translate(-50%,8px); transition:opacity var(--dur-slow) var(--ease-out),visibility var(--dur-slow),transform var(--dur-slow) var(--ease-out); }
.toast.is-visible { opacity:1; visibility:visible; transform:translate(-50%,0); }
.toast-icon { flex:none; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:#FFFFFF; }
.toast-icon .icon { width:14px; height:14px; color:#1E8E5A; }
.copy-dialog { width:min(420px,100% - 32px); border:0; border-radius:var(--r-xl); padding:28px 24px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow-float); }
.copy-dialog::backdrop { background:rgba(23,20,27,.5); }
.dialog-close { position:absolute; top:8px; right:8px; width:44px; height:44px; border-radius:50%; background:transparent; display:grid; place-items:center; }
.dialog-close .icon { width:20px; height:20px; }
.dialog-face { display:block; font-size:28px; color:var(--ink-4); }
.copy-dialog h2 { font-size:20px; font-weight:700; margin-top:8px; }
.copy-dialog p { font-size:15px; color:var(--ink-3); margin-top:6px; }
#manual-copy-text { margin-top:16px; width:100%; border-radius:var(--r-sm); border:1px solid var(--line-strong); padding:12px; font-size:20px; background:var(--surface-2); resize:none; }
.dialog-ok { width:100%; margin-top:16px; }

@media (max-width:400px) {
  html[lang="en"] .hero-desc { max-width:none; font-size:clamp(12px,3.333333vw,17px); }
  .search-field input:placeholder-shown { padding-right:12px; }
  .filter-row .saved-filter { flex:none; height:44px; scroll-snap-align:start; }
}

@media (max-width:600px) {
  .emoticon-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .emote-card { position:relative; display:block; min-width:0; min-height:76px; }
  .emote-copy { display:grid; grid-template-columns:minmax(0,1fr) 44px; grid-template-rows:24px 44px; align-items:center; gap:0; width:100%; min-height:76px; padding:6px 8px 2px; }
  .emote-value, .emote-value.is-long, .emote-value.is-very-long { grid-column:1 / -1; grid-row:1; min-width:0; font-size:clamp(14px,4.4vw,18px); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:clip; }
  .emote-name, .copy-label { grid-column:1; grid-row:2; min-width:0; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .save-button { position:absolute; right:8px; bottom:2px; margin-right:0; }
}

@media (max-width:767px) {
  .font-card:nth-child(6) .font-sample { font-size:min(var(--fs-font-sample),4.5vw); }
}
@media (max-width:389px) {
  html[lang="ko"] .hero-desc { font-size:16px; }
  html[lang="en"] .header-inner { gap:4px; }
  html[lang="en"] .header-actions { gap:4px; }
  html[lang="en"] .language-switch { padding-inline:4px; }
  html[lang="en"] .header-get { padding-inline:12px; }
}

@media (min-width:640px) {
  .hero { padding-top:40px; padding-bottom:56px; }
  .hero-wall { height:120px; }
  .wall-glyph:nth-child(-n+20) { display:block; }
  .store-row { flex-direction:row; justify-content:center; }
  .store-row .btn-store { width:auto; }
  .playground-panel { padding:24px; }
  .filter-row { margin-inline:-24px; padding-inline:24px; }
  .download-card { padding:56px 40px; }
}
@media (min-width:768px) {
  .feature-list { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:64px; row-gap:56px; }
  .font-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  .steps { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .section-head.is-split { display:flex; justify-content:space-between; align-items:end; gap:24px; }
  .footer-main { grid-template-columns:1.4fr 1fr 1fr 1fr; }
}
@media (min-width:1024px) {
  .section-head { margin-bottom:40px; }
  .header-inner { gap:0; }
  .studio-link { display:flex; align-items:center; min-height:44px; margin-left:12px; gap:12px; font-size:13px; font-weight:600; color:var(--ink-3); }
  .studio-link::before { content:""; width:1px; height:16px; background:var(--line); }
  .studio-link:hover { color:var(--ink); }
  .site-menu { position:static; display:flex; margin-inline:auto; padding:0; border:0; box-shadow:none; }
  .site-menu a { min-height:44px; padding:0 12px; font-size:15px; color:var(--ink-3); border:0; white-space:nowrap; }
  .site-menu a:hover { color:var(--ink); }
  .site-menu .mobile-only, .menu-button { display:none; }
  html.no-js .site-menu { display:flex; }
  .header-actions { margin:0; }
  .hero { position:relative; min-height:clamp(600px,78vh,760px); display:grid; place-items:center; overflow:hidden; padding:0; }
  .hero-wall { position:absolute; inset:0; height:auto; margin:0; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(4,1fr); place-items:center; padding:24px 32px; gap:0; mask-image:radial-gradient(ellipse 36% 44% at 50% 50%,transparent 72%,#000 100%); -webkit-mask-image:radial-gradient(ellipse 36% 44% at 50% 50%,transparent 72%,#000 100%); }
  .wall-glyph:nth-child(n) { display:block; opacity:.42; }
  .hero-inner { position:relative; z-index:1; max-width:780px; padding-block:48px; }
  .hero h1 { max-width:none; }
  .hero-desc { margin-top:20px; }
  .store-row { margin-top:35px; }
  .store-row .btn-store { min-width:240px; }
  .hero-terms { margin-top:17.5px; }
  .quick-more { margin-top:10px; }
  .trust { display:flex; align-items:center; justify-content:center; max-width:820px; gap:48px; }
  .trust-stats { flex:1; }
  .trust-stats > div { padding-inline:24px; }
  .trust dd { font-size:26px; }
  .trust-source { flex:none; }
  .pg-layout { grid-template-columns:minmax(0,1fr) 360px; gap:32px; align-items:start; }
  .pg-side { position:sticky; top:calc(var(--header-h) + 24px); }
  .playground-panel, .message-preview { padding:28px; }
  .filter-row { flex-wrap:wrap; overflow:visible; margin-inline:0; padding-inline:0; }
  .search-field kbd { position:absolute; right:14px; top:13px; width:24px; height:24px; display:grid; place-items:center; border-radius:6px; border:1px solid var(--line-strong); font-size:13px; color:var(--ink-3); }
  .search-field:focus-within kbd, .search-clear:not([hidden]) ~ kbd { display:none; }
  .emoticon-grid { gap:12px; }
  .emote-copy { min-height:76px; padding:14px 6px 14px 24px; }
  .save-button { margin-right:8px; }
  .screens-head { display:flex; justify-content:space-between; align-items:end; gap:24px; }
  .rail-arrows { display:flex; }
  .screen-rail { gap:24px; }
  .screen-card { flex-basis:280px; }
  .font-card { min-height:160px; padding:24px 24px 24px 32px; }
  .glyph-grid { grid-template-columns:repeat(12,minmax(0,1fr)); }
  .reviews-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  .review-card { padding:24px; border-radius:var(--r-lg); }
  .review-invite { border-radius:var(--r-lg); }
  .faq-item { border-radius:var(--r-lg); }
  .faq-item summary { padding:24px 28px; grid-template-columns:96px 1fr 24px; grid-template-areas:"tag q icon"; }
  .faq-answer { padding:0 28px 24px 124px; }
  .download-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:48px; align-items:center; padding:72px 64px; }
  .dl-actions { margin-top:0; min-width:280px; }
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .brand img { box-shadow:0 0 0 1px var(--line); }
  :root:not([data-theme="light"]) .btn-tone:hover { filter:brightness(1.15); }
  :root:not([data-theme="light"]) .saved-filter[aria-pressed="true"] .count { background:rgba(0,0,0,.18); }
  :root:not([data-theme="light"]) .btn-share:hover { background:rgba(0,0,0,.08); }
}
:root[data-theme="dark"] .brand img { box-shadow:0 0 0 1px var(--line); }
:root[data-theme="dark"] .btn-tone:hover { filter:brightness(1.15); }
:root[data-theme="dark"] .saved-filter[aria-pressed="true"] .count { background:rgba(0,0,0,.18); }
:root[data-theme="dark"] .btn-share:hover { background:rgba(0,0,0,.08); }

/* Seven-part editor: fixed rows keep the demo's changing glyphs inside its frame. */
.maker { margin:24px auto 0; padding:16px; display:grid; gap:12px; position:relative; text-align:left; background:var(--surface); border:var(--border); border-radius:var(--r-xl); --ys-shine-color:rgba(138,68,174,.35); }
.maker__head { position:absolute; top:16px; left:16px; right:16px; height:44px; display:flex; align-items:center; gap:4px; z-index:1; pointer-events:none; }
.maker__title { font-size:13px; font-weight:700; color:var(--ink-2); margin-right:auto; padding-left:12px; white-space:nowrap; }
.maker__sub { display:none; }
.maker__ctrl { display:flex; align-items:center; flex:none; }
.maker__ctrl button { pointer-events:auto; }
html.no-js .maker__ctrl { display:none; }
.maker__preview { position:relative; width:100%; height:132px; padding:52px 12px 14px; border-radius:var(--r-lg); background:var(--surface-2); color:var(--ink); display:grid; place-items:center; align-content:center; gap:8px; }
.maker__preview::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 2px var(--accent); pointer-events:none; opacity:0; }
.maker__preview:focus-visible { outline-offset:2px; }
.maker__face { font-size:var(--fs-glyph-preview); line-height:1.25; }
.maker__part { display:inline-block; position:relative; }
.maker__part::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; border-radius:1px; background:var(--accent); opacity:0; }
.maker__part[data-active]::after { opacity:1; }
.maker__empty { font-size:13px; color:var(--ink-3); text-align:center; }
.maker__hint { display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:13px; font-weight:600; color:var(--ink-3); }
.maker__hint .icon { width:16px; height:16px; }
.maker[data-state="ready"] .maker__hint, .maker__preview[data-copied] .maker__hint { color:var(--accent); }
.maker[data-state="ready"] .maker__preview::after { opacity:1; }
.maker__slots { display:flex; gap:8px; min-width:0; height:44px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; margin-inline:-16px; padding:0 16px; scroll-padding-inline:16px; }
.maker__slots::-webkit-scrollbar { display:none; }
.maker__slot { min-width:44px; height:44px; padding:0 14px; border-radius:var(--r-pill); background:var(--surface-2); color:var(--ink-2); font-size:15px; font-weight:600; flex:none; white-space:nowrap; scroll-snap-align:start; }
.maker__slot[aria-pressed="true"], .maker__pick[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); }
.maker__edit { display:flex; align-items:center; justify-content:space-between; height:44px; gap:12px; }
.maker__editing { font-size:15px; font-weight:600; color:var(--ink-2); }
.maker__switch { min-height:44px; min-width:128px; display:inline-flex; justify-content:flex-end; align-items:center; gap:10px; background:transparent; font-size:13px; font-weight:600; color:var(--ink-3); }
.maker__track { width:40px; height:24px; border-radius:var(--r-pill); background:var(--line-strong); display:flex; align-items:center; flex:none; box-shadow:inset 0 0 0 1px var(--ink-3); }
.maker__switch[aria-checked="true"] .maker__track { background:var(--accent); box-shadow:none; }
.maker__thumb { width:18px; height:18px; border-radius:50%; background:var(--surface); translate:3px 0; }
.maker__switch[aria-checked="true"] .maker__thumb { translate:19px 0; }
.maker__picks { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; height:96px; }
.maker__pick { height:44px; min-width:44px; padding:0 4px; border-radius:var(--r-pill); background:var(--surface-2); font-size:var(--fs-glyph-chip); color:var(--ink); }
.maker__icon { width:44px; height:44px; border-radius:var(--r-pill); background:transparent; display:grid; place-items:center; }
.maker__icon .icon { width:18px; height:18px; color:var(--ink-2); }
.maker__icon[aria-pressed="true"] .i-when-playing, .maker__icon:not([aria-pressed="true"]) .i-when-paused { display:none; }
.maker__replay { height:44px; padding:0 12px; border-radius:var(--r-pill); background:transparent; font-size:13px; font-weight:600; color:var(--accent); white-space:nowrap; }
.maker[data-state="live"] [data-ys-demo-pause], html[data-ys-motion="reduced"] .maker [data-ys-demo-pause], html[data-ys-motion="auto"] .maker [data-ys-demo-pause], html[data-ys-motion="off"] .maker [data-ys-demo-pause] { visibility:hidden; }
@media (hover:hover) {
  .maker__preview:hover, .maker__icon:hover { background:var(--surface-3); }
}
@media (prefers-reduced-motion:no-preference) {
  html[data-ys-motion="on"] .maker__part::after, html[data-ys-motion="on"] .maker__preview::after { transition:opacity var(--ys-dur-short) var(--ys-ease-move); }
  html[data-ys-motion="on"] .maker__thumb { transition:translate var(--ys-dur-short) var(--ys-ease-move); }
  html[data-ys-motion="on"] .maker__slot, html[data-ys-motion="on"] .maker__pick { transition:color var(--ys-dur-micro) var(--ys-ease-standard),background-color var(--ys-dur-micro) var(--ys-ease-standard),scale var(--ys-dur-micro) var(--ys-ease-standard); }
}
@media (max-width:639px) { .hero-wall { display:none; } }
@media (min-width:640px) and (max-width:1023px) { .maker { max-width:560px; } }
@media (min-width:1024px) {
  .maker { margin-top:32px; width:min(760px,100%); padding:24px; grid-template-columns:260px minmax(0,1fr); grid-template-areas:"head head" "slots slots" "preview edit" "preview picks"; gap:12px 24px; }
  .maker__head { position:static; grid-area:head; }
  .maker__title { font-size:15px; color:var(--ink); margin-right:0; padding:0; }
  .maker__sub { display:block; font-size:13px; font-weight:500; color:var(--ink-3); margin-left:12px; margin-right:auto; }
  .maker__preview { grid-area:preview; height:152px; padding:16px; }
  .maker__slot { padding-inline:13px; }
  .maker__slots { grid-area:slots; flex-wrap:wrap; overflow:visible; margin:0; padding:0; }
  .maker__edit { grid-area:edit; }
  .maker__picks { grid-area:picks; }
}
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .maker { --ys-shine-color:rgba(197,139,221,.35); } }
:root[data-theme="dark"] .maker { --ys-shine-color:rgba(197,139,221,.35); }
/* The short Korean Web games label still gets a full touch target. */
.ys-web a { min-width:44px; }

/* Glyph positions are cached once and written as translate; no-JS keeps inline parts. */
.maker__face[data-maker-layout] { position:relative; width:100%; height:1.25em; }
.maker__face[data-maker-layout] .maker__part { position:absolute; left:50%; top:0; transform:translateX(var(--maker-part-x,0px)); }
.maker__measure { position:absolute; left:0; top:0; visibility:hidden; white-space:nowrap; font-family:var(--font-glyph); font-weight:400; font-size:var(--fs-glyph-preview); line-height:1.25; }
.maker__measure > span { display:inline-block; }
@media (prefers-reduced-motion:reduce) {
  .maker, .maker * { transition:none !important; animation:none !important; }
}
html[data-ys-motion="auto"] .maker *, html[data-ys-motion="off"] .maker * { transition:none !important; animation:none !important; }
.maker__face { width:100%; display:flex; align-items:center; justify-content:center; height:1.25em; }
@media (prefers-reduced-motion:reduce) {
  .maker::after, .maker *::before, .maker *::after { transition:none !important; animation:none !important; }
}
html[data-ys-motion="auto"] .maker *::after, html[data-ys-motion="off"] .maker *::after { transition:none !important; animation:none !important; }

.maker__switch-text { width:64px; flex:none; text-align:left; }