/* unbox — yebni glass layer (홈·만들기 화면). 받는 화면(선물 열기)은 결과물 연출이라 원래 픽셀 디자인 유지.
   픽셀 아트(히어로·아이콘·상자·포장지)는 그대로, 그것을 둘러싼 틀·버튼·글자만 유리+Apple로. */
:root{
 color-scheme:light dark;
 --acc:#AC7D5D;--acc-ink:#775740;--acc-soft:#E9D9CE;--acc-mist:#F3ECE8;--on-acc:#fff;
 --g-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Pretendard Variable",Pretendard,"Apple SD Gothic Neo",system-ui,sans-serif;
 --g-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Pretendard Variable",Pretendard,"Apple SD Gothic Neo",system-ui,sans-serif;
 --g-ink:#1D1D1F;--g-ink-2:#6E6E73;--g-ink-3:#8E8E93;--g-bg:#F2F2F5;
 --g-glass:rgba(255,255,255,.62);--g-glass-thick:rgba(255,255,255,.82);--g-edge:rgba(255,255,255,.78);
 --g-blur:blur(26px) saturate(160%);--g-fill:rgba(118,118,128,.12);--g-fill-2:rgba(118,118,128,.08);--g-sep:rgba(60,60,67,.13);
 --g-shadow-1:0 .5px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(20,22,40,.04),0 6px 20px -8px rgba(20,22,40,.12);
 --g-shadow-2:0 .5px 0 rgba(255,255,255,.9) inset,0 2px 6px rgba(20,22,40,.05),0 24px 48px -18px rgba(20,22,40,.22);
 --g-ease:cubic-bezier(.32,.72,0,1)}
@media (prefers-color-scheme:dark){:root{
 --acc:#C29D84;--acc-ink:#E3CBB9;--acc-soft:#4B3B30;--acc-mist:#2A231D;--on-acc:#1E140D;
 --g-ink:#F5F5F7;--g-ink-2:#A1A1A6;--g-ink-3:#6E6E73;--g-bg:#0B0B0D;
 --g-glass:rgba(40,40,44,.55);--g-glass-thick:rgba(44,44,48,.78);--g-edge:rgba(255,255,255,.10);
 --g-fill:rgba(118,118,128,.24);--g-fill-2:rgba(118,118,128,.16);--g-sep:rgba(84,84,88,.55);
 --g-shadow-1:0 .5px 0 rgba(255,255,255,.07) inset,0 8px 24px -10px rgba(0,0,0,.6);
 --g-shadow-2:0 .5px 0 rgba(255,255,255,.08) inset,0 28px 60px -20px rgba(0,0,0,.75)}}

/* ── 바탕·셸 ── */
html:has(body.kind-home),html:has(body.kind-create),html:has(body.kind-error){background:var(--g-bg)}
body.kind-home,body.kind-create,body.kind-error{background:transparent!important;color:var(--g-ink);font-family:var(--g-font);-webkit-font-smoothing:antialiased;padding:0!important}
body.kind-home::before,body.kind-create::before,body.kind-error::before{content:"";position:fixed;inset:-20vmax;z-index:-1;pointer-events:none;
 background:radial-gradient(38vmax 30vmax at 18% 12%,var(--acc-mist),transparent 70%),
  radial-gradient(34vmax 28vmax at 88% 28%,color-mix(in oklab,var(--acc-soft) 70%,var(--g-bg)),transparent 70%),
  radial-gradient(44vmax 32vmax at 50% 105%,color-mix(in oklab,var(--acc-mist) 80%,#fff),transparent 72%),var(--g-bg)}
@media (prefers-color-scheme:dark){body.kind-home::before,body.kind-create::before,body.kind-error::before{background:
  radial-gradient(38vmax 30vmax at 18% 8%,color-mix(in oklab,var(--acc) 26%,transparent),transparent 70%),
  radial-gradient(34vmax 28vmax at 90% 30%,color-mix(in oklab,var(--acc) 14%,transparent),transparent 70%),var(--g-bg)}}
.kind-home .shell,.kind-create .shell,.kind-error .shell{width:min(100%,560px);min-height:100vh;min-height:100dvh;border:0;background:transparent;box-shadow:none;overflow:visible;padding:0 clamp(12px,3.5vw,20px)}
.kind-home :focus-visible,.kind-create :focus-visible{outline:2px solid color-mix(in oklab,var(--acc) 85%,#fff)!important;outline-offset:2px!important}

/* 상단 바 (공통) */
.kind-home .home-nav,.kind-create .creator-topbar{position:sticky;top:0;z-index:30;height:auto!important;min-height:52px;
 margin:0 calc(-1 * clamp(12px,3.5vw,20px));padding:env(safe-area-inset-top) clamp(14px,4vw,22px) 0!important;
 display:flex!important;align-items:center;justify-content:space-between;gap:10px;
 background:color-mix(in oklab,var(--g-bg) 72%,transparent)!important;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
 border:0!important;border-bottom:.5px solid var(--g-sep)!important;box-shadow:none!important;color:var(--g-ink)}
.kind-home .home-nav .brand,.kind-create .creator-wordmark{display:flex;align-items:center;gap:9px;font:600 17px/1 var(--g-display)!important;letter-spacing:-.02em!important;text-decoration:none;color:var(--g-ink)}
.kind-home .home-nav .brand::before,.kind-create .creator-wordmark::before{content:"";width:28px;height:28px;border-radius:7px;background:url(/icon-192.png) center/cover;flex:none}
.kind-home .home-nav nav{gap:6px!important}
.kind-home .home-nav button{min-height:36px!important;padding:0 12px!important;border-radius:999px;background:var(--g-fill)!important;color:var(--g-ink)!important;font:600 14px/1 var(--g-font)!important;letter-spacing:-.01em!important;transition:transform .18s var(--g-ease)}
.kind-home .home-nav button:last-child{min-width:36px;padding:0!important;font:500 17px/1 var(--g-font)!important;color:var(--acc-ink)!important}
.kind-home .home-nav button:active,.kind-create .creator-back:active{transform:scale(.95)}

/* ── 홈 ── */
.kind-home main{display:block}
.kind-home .home-hero{margin-top:14px;border-radius:22px;overflow:hidden;box-shadow:var(--g-shadow-1);background:#ffb6c4}
.kind-home .hero-spark{animation:none}
.kind-home .pick-section{margin:14px 0 0!important;padding:16px 12px 18px!important;border:.5px solid var(--g-edge)!important;border-radius:22px!important;
 background:var(--g-glass)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:var(--g-shadow-1)!important}
.kind-home .gift-menu{grid-template-columns:repeat(4,minmax(0,1fr))!important;row-gap:6px!important;column-gap:4px!important}
@media (min-width:560px){.kind-home .gift-menu{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
.kind-home .gift-option{min-height:0!important;padding:8px 2px 10px!important;border:0!important;border-radius:16px!important;transition:transform .18s var(--g-ease),background .2s!important}
.kind-home .gift-option .icon{height:clamp(48px,13vw,64px)!important}
.kind-home .gift-option>span:last-child,html:not([lang=en]) .kind-home .gift-option>span:last-child{font:600 13px/1.2 var(--g-font)!important;letter-spacing:-.01em!important;margin-top:6px;color:var(--g-ink);white-space:normal!important}
@media (hover:hover){.kind-home .gift-option:hover{background:var(--g-fill-2)!important;transform:translateY(-2px)!important}}
.kind-home .gift-option:focus-visible{background:var(--g-fill-2)!important}
.kind-home .gift-option:active{transform:scale(.96)!important}
.kind-home .more-soon{display:none!important}
.kind-home .home-garden{margin:14px 0 0!important;border-radius:22px;overflow:hidden;box-shadow:var(--g-shadow-1)}

/* 대화상자 */
.kind-home dialog{border:.5px solid var(--g-edge)!important;border-radius:28px!important;background:var(--g-glass-thick)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
 box-shadow:var(--g-shadow-2)!important;color:var(--g-ink)!important;padding:22px 22px 20px!important}
.kind-home dialog::backdrop{background:rgba(0,0,0,.32)}
.kind-home dialog h2{font:700 24px/1.2 var(--g-display)!important;letter-spacing:-.02em;margin:4px 0 12px!important}
.kind-home dialog p,.kind-home .archive-empty{font:400 15px/1.6 var(--g-font)!important;color:var(--g-ink-2)}
.kind-home dialog .dialog-close{width:36px;height:36px;border-radius:999px!important;background:var(--g-fill)!important;font:500 20px/1 var(--g-font)!important;color:var(--g-ink-2)}
.kind-home .archive-item{border-top:.5px solid var(--g-sep)!important;font:500 15px/1.4 var(--g-font);padding:12px 4px!important}
.kind-home .archive-item small{color:var(--g-ink-2);font-size:13px}

/* 주요 버튼(알약·채움) */
.kind-home .pixel-button,.kind-create .creator-submit,.kind-create .creator-done>.pixel-button{
 width:100%!important;min-height:52px!important;margin:18px 0 4px!important;padding:0 18px!important;border:0!important;border-radius:16px!important;
 background:var(--acc)!important;color:var(--on-acc)!important;box-shadow:0 8px 20px -10px color-mix(in oklab,var(--acc) 80%,transparent)!important;
 font:600 17px/1 var(--g-font)!important;letter-spacing:-.01em!important;text-transform:none!important;transition:transform .18s var(--g-ease)!important}
.kind-home .pixel-button:active,.kind-create .creator-submit:active,.kind-create .creator-done>.pixel-button:active{transform:scale(.97)!important}
.kind-create .creator-cursor{display:none}

/* ── 만들기 ── */
body.kind-create:has(.creator){background:transparent!important}
.kind-create .creator{background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;padding:0 0 calc(24px + env(safe-area-inset-bottom))!important;color:var(--g-ink)}
.kind-create .creator:before{display:none}
.kind-create .creator-back{width:36px!important;height:36px!important;border:0!important;border-radius:999px;background:var(--g-fill);box-shadow:none!important;font:500 20px/1 var(--g-font)!important;padding:0!important;color:var(--g-ink)}
.kind-create .creator-wordmark{flex:1;justify-content:center}
.kind-create .creator-step{min-width:36px;text-align:right;font:500 14px/1 var(--g-font)!important;color:var(--g-ink-2);border:0!important;font-variant-numeric:tabular-nums}
.kind-create .creator-progress{height:auto!important;padding:10px 2px 12px!important;gap:6px!important}
.kind-create .creator-progress i{flex:1;height:4px!important;width:auto!important;border:0!important;border-radius:4px;box-shadow:none!important;background:var(--g-fill)!important}
.kind-create .creator-progress i.is-active{background:var(--acc)!important}
.kind-create .creator-form{background:var(--g-glass);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:.5px solid var(--g-edge);border-radius:22px;box-shadow:var(--g-shadow-1);padding:16px 0 18px}
.kind-create .creator-preview-row{padding:0 16px 14px!important;gap:12px!important}
.kind-create .creator-preview{border:0!important;border-radius:16px;box-shadow:0 10px 24px -12px rgba(0,0,0,.45)!important}
.kind-create .creator-color{border:0!important;border-radius:12px;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)!important}
.kind-create .creator-color.is-selected{outline:2.5px solid var(--acc)!important;outline-offset:2.5px!important}
.kind-create .creator-color.is-selected:after{display:none}
.kind-create .creator-customize{padding:0 16px!important}
.kind-create .creator-option-row,.kind-create .creator-add,.kind-create .creator-design-group{border-top:.5px solid var(--g-sep)!important}
.kind-create .creator-option-row legend,.kind-create .creator-add legend,.kind-create .creator-design-group legend{font:600 14px/1.3 var(--g-font)!important;color:var(--g-ink-2);letter-spacing:0!important;padding:12px 0 8px!important}
.kind-create .creator-arrow{font:300 30px/1 var(--g-font)!important;color:var(--g-ink-2)!important;min-height:44px}
.kind-create .creator-choice{border-radius:10px;border-color:transparent!important;box-shadow:none!important;background:transparent!important}
.kind-create .creator-choice.is-selected{background:var(--acc-soft)!important;box-shadow:0 0 0 2px var(--acc)!important}
.kind-create .creator-options-sticker .creator-choice{background:var(--g-fill-2)!important;border:0!important}
.kind-create .creator-options-sticker .creator-choice.is-selected{background:var(--acc-soft)!important}
.kind-create .creator-design-option{border:.5px solid var(--g-sep)!important;border-radius:14px;background:var(--g-fill-2)!important;box-shadow:none!important;padding:10px 4px!important}
.kind-create .creator-design-option.is-selected{background:var(--acc-soft)!important;border-color:transparent!important;box-shadow:0 0 0 2px var(--acc)!important}
.kind-create .creator-design-option-label{font:500 13px/1.35 var(--g-font)!important;color:var(--g-ink)}
.kind-create .creator-add-buttons{padding:4px 0 10px!important;gap:10px!important}
.kind-create .creator-add-buttons button{height:48px!important;border:0!important;border-radius:14px;background:var(--g-fill)!important;box-shadow:none!important;color:var(--g-ink)!important;transition:transform .18s var(--g-ease)}
.kind-create .creator-add-buttons button:active{transform:scale(.95)}
.kind-create .creator-add-buttons button>span:not(.creator-photo-count){font:600 24px/1 var(--g-display)!important}
.kind-create .creator-add-buttons button svg{width:22px!important;height:22px!important;stroke-width:2!important}
.kind-create .creator-add-buttons button[aria-expanded=true]{background:var(--acc-soft)!important;color:var(--acc-ink)!important}
.kind-create .creator-photo-count{border:0!important;border-radius:999px;background:var(--acc)!important;color:var(--on-acc);font:600 11px/18px var(--g-font)!important;right:-4px!important;top:-6px!important}
.kind-create .creator-content{border:.5px solid var(--g-sep)!important;border-radius:16px;background:var(--g-glass-thick)!important;overflow:hidden}
.kind-create .creator-content summary{font:600 15px/1.3 var(--g-font)!important;letter-spacing:0!important;min-height:44px;padding:0 14px!important}
.kind-create .creator-content[open] summary{border-bottom:.5px solid var(--g-sep)!important}
.kind-create .creator-content label{font:500 14px/1.3 var(--g-font)!important;color:var(--g-ink-2)}
.kind-create .creator-content input,.kind-create .creator-content textarea,.kind-create .creator-content select{border:.5px solid var(--g-sep)!important;border-radius:12px!important;background:var(--g-glass-thick)!important;color:var(--g-ink)!important;box-shadow:none!important;font:400 16px/1.4 var(--g-font)!important;padding:11px 12px!important;min-height:44px}
.kind-create .creator-content input:focus,.kind-create .creator-content textarea:focus,.kind-create .creator-content select:focus{outline:none!important;border-color:color-mix(in oklab,var(--acc) 60%,transparent)!important;box-shadow:0 0 0 4px color-mix(in oklab,var(--acc) 22%,transparent)!important}
.kind-create .creator-help,.kind-create .creator-photo-tools{font:400 13px/1.5 var(--g-font)!important;color:var(--g-ink-2)!important}
.kind-create .creator-photo-tools button{min-height:36px;border:0!important;border-radius:999px;background:var(--g-fill)!important;padding:0 12px!important;font:600 14px/1 var(--g-font)!important;color:var(--g-ink)}
.kind-create .creator-thumbnail{border:0!important;border-radius:12px;overflow:visible;padding:0!important;background:transparent!important}
.kind-create .creator-thumbnail img{border-radius:12px}
.kind-create .creator-thumbnail button{border:0!important;border-radius:999px;background:rgba(29,29,31,.82)!important;color:#fff;font:500 16px/23px var(--g-font)!important}
.kind-create .creator-status:not(:empty){border:0!important;border-radius:12px;background:rgba(196,87,79,.12)!important;color:#A64A43!important;font:500 14px/1.5 var(--g-font)!important;padding:10px 12px!important}
@media (prefers-color-scheme:dark){.kind-create .creator-status:not(:empty){color:#E29A93!important}}
/* 완성 화면 */
.kind-create .creator-done{margin:0!important;padding:22px 18px!important;border:.5px solid var(--g-edge)!important;border-radius:22px;background:var(--g-glass)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:var(--g-shadow-1)!important;color:var(--g-ink)}
.kind-create .creator-done>img{border:0!important;border-radius:16px;width:min(80%,320px)!important}
.kind-create .creator-done h1{font:700 30px/1.15 var(--g-display)!important;letter-spacing:-.025em;margin:18px 0 4px!important}
.kind-create .creator-url-label{font:500 14px/1.3 var(--g-font)!important;color:var(--g-ink-2);margin-top:18px!important}
.kind-create .creator-url-row{border:.5px solid var(--g-sep)!important;border-radius:12px;overflow:hidden;background:var(--g-glass-thick)!important}
.kind-create .creator-url-row input{font:400 15px/1.4 var(--g-font)!important;color:var(--g-ink)!important;padding:12px!important}
.kind-create .creator-url-row button{border:0!important;background:var(--g-fill)!important;color:var(--acc-ink);font:600 15px/1 var(--g-font)!important;min-width:64px}
.kind-create .creator-share-status{font:500 14px/1.4 var(--g-font)!important;color:var(--g-ink-2)!important}
.kind-create .creator-preview-link,.kind-create .creator-again{font:600 16px/1.3 var(--g-font)!important;color:var(--acc-ink)!important;text-decoration:none}
.kind-create .creator-again{color:var(--g-ink-2)!important;font-size:15px!important}

/* ── 푸터·언어 ── */
.kind-home .footer,.kind-create .footer,.kind-error .footer{background:transparent!important;border:0!important;color:var(--g-ink-2)!important;font:400 12px/1.4 var(--g-font)!important;padding:22px 6px 6px!important}
.kind-home .language-switch,.kind-create .language-switch,.kind-error .language-switch{background:transparent!important;border:0!important;color:var(--g-ink-2)!important;font:400 13px/1.3 var(--g-font)!important;padding:4px 10px calc(18px + env(safe-area-inset-bottom))!important}
.kind-home .language-switch select,.kind-create .language-switch select,.kind-error .language-switch select{min-height:36px;border:.5px solid var(--g-sep)!important;border-radius:10px!important;background:var(--g-glass-thick)!important;color:var(--g-ink)!important;font:400 16px/1.2 var(--g-font)!important;padding:4px 10px!important}
.kind-error .error-page{font:400 16px/1.7 var(--g-font)!important;color:var(--g-ink)}
.kind-error .error-page h1{font:700 30px/1.15 var(--g-display)!important}
.kind-error .error-page a{color:var(--acc-ink);font-weight:600}

/* ── 넓은 화면 ── */
@media (min-width:960px){
 .kind-home .shell{width:min(100%,1040px)}
 .kind-home main{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:start;padding-top:18px}
 .kind-home .home-hero{grid-column:1;grid-row:1;margin:0}
 .kind-home .home-garden{grid-column:1;grid-row:2;margin:0!important}
 .kind-home .pick-section{grid-column:2;grid-row:1/span 2;margin:0!important}
 .kind-create .shell{width:min(100%,1040px)}
 .kind-create .creator-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,420px);column-gap:8px;align-items:start;padding:20px 4px 20px}
 .kind-create .creator-preview-row{position:sticky;top:76px}
 .kind-create .creator-done{max-width:560px;margin:0 auto!important}
}
@media (max-width:339px){.kind-home .gift-menu{grid-template-columns:repeat(3,minmax(0,1fr))!important}}