/* 냥 충전 — 종이, 먹, 황동. 장식은 상품 선택과 결제 흐름을 가리지 않는다. */
.uo-page { margin:0; background:#eeeae1; color:#252820; font:400 15px/1.7 'Noto Sans KR',sans-serif; isolation:isolate; }
.uo-page *, .uo-page *::before, .uo-page *::after { box-sizing:border-box; }
.uo-page [hidden] { display:none !important; }
.uo-page a { color:inherit; }
.uo-page a:focus-visible, .uo-page button:focus-visible { outline:2px solid #92723d; outline-offset:5px; }
.uo-skip { position:fixed; top:-100px; left:20px; z-index:100; padding:12px; background:white; }
.uo-skip:focus { top:12px; }
.uo-scene { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:radial-gradient(ellipse at 83% 19%,#dacbad78,transparent 43%),#eeeae1; }
.uo-scene video { width:100%; height:100%; object-fit:cover; opacity:.35; transition:opacity 1.2s ease; }
.uo-page.uo-video-ready .uo-scene video { opacity:.48; }
.uo-scene::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#eeeae1b8,transparent 80%),linear-gradient(0deg,#eeeae1,transparent 70%); }
.uo-ink { position:absolute; width:55vw; height:55vw; right:-22vw; top:10vh; border-radius:43% 57% 53% 47%; background:radial-gradient(ellipse,#434b3c18,transparent 70%); filter:blur(24px); animation:uo-ink 24s ease-in-out infinite alternate; }
.uo-dust { position:absolute; inset:0; }
.uo-dust i { position:absolute; width:3px; height:3px; background:#ad8c51; border-radius:50%; opacity:0; animation:uo-drift 16s ease-in-out infinite; }
.uo-dust i:nth-child(1){left:13%;top:31%;animation-delay:-3s}.uo-dust i:nth-child(2){left:78%;top:20%;animation-delay:-7s}.uo-dust i:nth-child(3){left:93%;top:65%;animation-delay:-1s}.uo-dust i:nth-child(4){left:59%;top:48%;animation-delay:-11s}.uo-dust i:nth-child(5){left:30%;top:77%;animation-delay:-13s}.uo-dust i:nth-child(6){left:68%;top:82%;animation-delay:-5s}
.uo-nav { max-width:1180px; margin:auto; padding:26px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid #3f483521; }
.uo-brand { display:flex; align-items:baseline; gap:13px; font:500 24px 'Noto Serif KR',serif; text-decoration:none; letter-spacing:-1px; }
.uo-brand span { font:400 10px 'Noto Sans KR',sans-serif; letter-spacing:.2em; color:#8a806c; }
.uo-nav nav { display:flex; align-items:center; gap:28px; font-size:13px; }
.uo-nav nav a { min-height:44px; display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.uo-nav nav a:hover { color:#876b39; }
.uo-main { max-width:1180px; margin:auto; padding:0 0 24px; }
.uo-hero { display:grid; grid-template-columns:1.2fr .8fr; align-items:center; min-height:340px; position:relative; padding:46px 30px 48px 0; }
.uo-eyebrow { display:flex; align-items:center; gap:12px; margin:0 0 24px; color:#797363; font-size:11px; letter-spacing:.1em; }
.uo-eyebrow>span { width:27px; height:1px; background:#967d4f; }
.uo-page h1 { margin:0; text-align:left; color:#242820; font:400 clamp(35px,4vw,54px)/1.45 'Noto Serif KR',serif; letter-spacing:-.055em; }
.uo-lead { margin:23px 0 0; font-size:13px; color:#757568; letter-spacing:.06em; }
.uo-art { display:grid; justify-items:center; align-content:center; gap:20px; min-width:0; }
.uo-orbit { position:relative; width:210px; height:210px; display:grid; place-items:center; animation:uo-float 8s ease-in-out infinite; }
.uo-coin { width:142px; height:142px; display:grid; place-items:center; position:relative; border:1px solid #b39d6b; border-radius:50%; background:conic-gradient(from 40deg,#e6d7ac,#b19a62,#eadbb2,#b3a171,#ecdeb9); box-shadow:inset 0 0 0 5px #e9dcb754,inset 0 0 0 7px #a18c564d,0 13px 20px #34362320,3px 6px 0 #9c89582b; transform:rotate(-9deg); }
.uo-coin::before { content:''; position:absolute; inset:14px; border:1px solid #a48b58a8; border-radius:50%; box-shadow:inset 0 0 24px #9d87422b; }
.uo-coin::after { content:''; position:absolute; inset:0; border-radius:50%; background:linear-gradient(120deg,transparent 32%,#fff8dd99 45%,transparent 59%); opacity:.4; }
.uo-coin span { font:500 54px 'Noto Serif KR',serif; color:#756238; text-shadow:1px 1px 0 #fff1c8; }
.uo-ring { position:absolute; inset:0; border:1px solid #8d754131; border-radius:50%; transform:rotate(-26deg) scaleY(.68); }
.uo-ring--outer { inset:-20px; border-style:dashed; opacity:.45; transform:rotate(36deg) scaleY(.78); animation:uo-orbit 45s linear infinite; }
.uo-spark { width:4px; height:4px; background:#b29152; border-radius:50%; position:absolute; box-shadow:0 0 12px #bd9d6199; }
.uo-spark--one { top:20px; right:32px; }.uo-spark--two { bottom:22px; left:22px; width:3px; height:3px; }.uo-spark--three { top:90px; left:-16px; width:2px; height:2px; }
.uo-art-caption { color:#8a806a; font-size:10px; letter-spacing:.22em; }
.uo-intro { min-width:0; }
.uo-motion-toggle { position:absolute; right:0; bottom:14px; display:flex; gap:7px; align-items:center; min-height:36px; padding:6px 10px; border:1px solid #81755b30; border-radius:30px; background:#f5f2e9a8; color:#786f5e; font:400 10px 'Noto Sans KR',sans-serif; cursor:pointer; }
.uo-section-head { display:flex; gap:20px; align-items:baseline; margin:0 0 18px; }
.uo-section-head h2 { margin:0; font:500 18px 'Noto Serif KR',serif; letter-spacing:-.03em; }
.uo-section-head p { margin:0; font-size:12px; color:#827c6e; }
.uo-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.uo-card { position:relative; padding:27px 25px 24px; border:1px solid #a29c883d; border-radius:15px; background:linear-gradient(135deg,#fffcf3d9,#f7f4e9c9); box-shadow:0 4px 10px #45493903; transition:translate .3s ease,box-shadow .3s ease,border-color .3s ease; animation:uo-enter .7s cubic-bezier(.2,.7,.2,1) both; }
.uo-card:nth-child(2){animation-delay:.08s}.uo-card:nth-child(3){animation-delay:.16s}.uo-card:nth-child(4){animation-delay:.24s}
.uo-card::before { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(115deg,transparent 30%,#fff9d540 48%,transparent 66%); opacity:0; transition:opacity .3s; }
.uo-card:hover,.uo-card:focus-within { translate:0 -6px; border-color:#b19962; box-shadow:0 18px 32px #46483214; }
.uo-card:hover::before,.uo-card:focus-within::before { opacity:1; }
.uo-card-top { display:flex; justify-content:space-between; align-items:center; margin:0 0 24px; }
.uo-card h3 { margin:0; font-size:12px; font-weight:400; color:#817763; }
.uo-card-mark { display:inline-flex; color:#9b8350; align-items:center; justify-content:center; width:28px; height:28px; font:400 12px 'Noto Serif KR',serif; border:1px solid #b39b6366; border-radius:50%; background:#dbca9940; box-shadow:2px 2px 0 #b39b631a; }
.uo-amount { margin:0; display:flex; align-items:baseline; gap:6px; font:500 clamp(33px,3.4vw,45px)/1.2 'Noto Serif KR',serif; font-variant-numeric:tabular-nums; letter-spacing:-.04em; color:#333a2e; }
.uo-unit { font:400 17px 'Noto Serif KR',serif; color:#6f705f; }
.uo-price { margin:12px 0 26px; font-size:16px; color:#757263; font-variant-numeric:tabular-nums; }
.uo-unit-price { margin:-18px 0 20px; color:#716d61; font-size:11px; font-variant-numeric:tabular-nums; }
.uo-astro-notice { margin:12px 0 0; max-width:720px; color:#777165; font-size:11px; line-height:1.8; }
.uo-charge { display:flex; min-height:47px; align-items:center; justify-content:space-between; gap:12px; padding:10px 15px; border:1px solid #4b5349; border-radius:7px; background:#343f36; color:#fffaf0 !important; text-decoration:none; font-size:13px; transition:background .2s; }
.uo-charge:hover { background:#4d5b48; }.uo-charge span { transition:transform .25s; }.uo-charge:hover span { transform:translateX(3px); }
.uo-notes { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 16px; margin:19px 0 0; font-size:11px; color:#878170; }
.uo-notes p { margin:0; }.uo-notes a { margin-left:6px; text-underline-offset:4px; color:#5d6555; }
.uo-status { color:#776e5d; min-height:48px; }.uo-retry { cursor:pointer; border:1px solid #81755b66; border-radius:6px; padding:10px 18px; background:#f8f4e8; color:#343f36; font:inherit; margin-bottom:20px; }
.uo-footer { margin:49px 0 0; padding:24px 0 0; border-top:1px solid #3f483521; font-size:10px; line-height:1.9; color:#8c8678; }
.uo-footer-top { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 15px; }
.uo-footer-brand { font:400 15px 'Noto Serif KR',serif; color:#6f705f !important; text-decoration:none; }
.uo-footer p { margin:5px 0; }.uo-policy { display:flex; flex-wrap:wrap; gap:18px; font-size:11px; }.uo-policy a { text-decoration:none; }
.uo-paused *, .uo-paused *::before, .uo-paused *::after { animation-play-state:paused !important; }
.uo-paused .uo-card { animation:none; }
.uo-paused .uo-card, .uo-paused .uo-charge, .uo-paused .uo-charge span { transition:none; }
@keyframes uo-enter { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes uo-float { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-9px) rotate(2deg); } }
@keyframes uo-orbit { to { transform:rotate(396deg) scaleY(.78); } }
@keyframes uo-ink { to { transform:translate(-6vw,8vh) scale(1.16); border-radius:54% 46% 37% 63%; } }
@keyframes uo-drift { 0%,100% { opacity:0; transform:translate(0,0); } 40%,65% { opacity:.5; } 80% { transform:translate(18px,-30px); } }
@media(max-width:1240px) { .uo-main,.uo-nav { margin-left:32px; margin-right:32px; } }
@media(max-width:800px) { .uo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.uo-hero { grid-template-columns:1fr 180px; min-height:300px; padding-right:0; }.uo-orbit { scale:.74; }.uo-art { gap:0; }.uo-art-caption { margin-top:-18px; font-size:9px; }.uo-page h1 { font-size:38px; }.uo-card { padding:23px; }.uo-footer-top { align-items:flex-start; } }
@media(max-width:520px) { .uo-main,.uo-nav { margin-left:20px; margin-right:20px; }.uo-nav { padding:17px 0; gap:12px; }.uo-brand { font-size:19px; gap:8px; }.uo-brand span { font-size:8px; }.uo-nav nav { gap:14px; font-size:11px; }.uo-hero { grid-template-columns:1fr 84px; min-height:263px; padding:29px 0 52px; }.uo-page h1 { font-size:30px; line-height:1.5; }.uo-eyebrow { font-size:9px; gap:8px; letter-spacing:0; margin-bottom:18px; }.uo-eyebrow>span { width:15px; }.uo-lead { font-size:11px; margin-top:18px; letter-spacing:0; }.uo-art { align-self:center; position:relative; left:-12px; }.uo-orbit { width:100px; height:130px; scale:.56; }.uo-art-caption { display:none; }.uo-ring { inset:-30px; }.uo-ring--outer { inset:-50px; }.uo-motion-toggle { bottom:17px; font-size:9px; }.uo-section-head { gap:12px; }.uo-section-head h2 { font-size:16px; }.uo-section-head p { font-size:10px; }.uo-grid { gap:12px; }.uo-card { padding:17px 15px 15px; border-radius:11px; }.uo-card-top { margin-bottom:18px; }.uo-card h3 { font-size:11px; }.uo-card-mark { width:23px; height:23px; font-size:10px; }.uo-amount { font-size:34px; gap:4px; }.uo-unit { font-size:14px; }.uo-price { font-size:13px; margin:9px 0 20px; }.uo-charge { min-height:44px; font-size:11px; padding:9px 10px; }.uo-notes { font-size:10px; margin-top:17px; }.uo-footer { margin-top:32px; padding-top:20px; padding-bottom:env(safe-area-inset-bottom,0px); font-size:9px; }.uo-footer-top { display:block; }.uo-policy { margin-top:12px !important; gap:13px; font-size:10px; } }
@media(max-width:350px) { .uo-main,.uo-nav { margin-left:15px; margin-right:15px; }.uo-brand span { display:none; }.uo-page h1 { font-size:26px; }.uo-hero { grid-template-columns:1fr 67px; }.uo-amount { font-size:29px; }.uo-card { padding:16px 12px; }.uo-charge { padding:9px 8px; } }
@media(max-width:520px) {
  .uo-unit-price { margin-top:-12px; font-size:10px; }
  .uo-scene video { object-position:85% center; }
  .uo-hero { display:block; }
  .uo-art { display:block; position:absolute; inset:0 0 auto auto; width:100px; height:100px; }
  .uo-orbit { position:absolute; left:50%; top:50%; margin:-105px 0 0 -105px; width:210px; height:210px; scale:.42; }
  .uo-ring { inset:0; }
  .uo-ring--outer { inset:-20px; }
}
@media(prefers-reduced-motion:reduce) { .uo-page *,.uo-page *::before,.uo-page *::after { animation:none !important; transition:none !important; }.uo-card:hover,.uo-card:focus-within { translate:none; } }
@media print { .uo-scene,.uo-art,.uo-motion-toggle { display:none !important; }.uo-page { background:white; }.uo-page * { animation:none !important; }.uo-hero { display:block; min-height:0; }.uo-card { break-inside:avoid; } }

/* 페이지 사이 이동 (2026-10-10): 다른 메뉴(una-ink-shell.css)와 같은 겹쳐 바꾸기. 디자인은 건드리지 않는다 */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
/* 앱(html.una-in-app) 안: 웹 결제 안내(승인일부터 12개월)는 숨기고 앱 결제 안내를 보인다. 웹에서는 앱 문구가 보이지 않는다. */
.uo-app-only { display:none; }
html.una-in-app .uo-app-only { display:block; }
html.una-in-app .uo-web-only { display:none; }
button.uo-charge { width:100%; font:inherit; font-size:13px; text-align:left; cursor:pointer; }