@import url("../shared/design-tokens.css");

:root { --ink:#242424; --muted:#666; --line:#777; --active:#e2f3e9; --active-line:#4d9a72; --ui-scale:1; }
html { background:#050403; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
.page-transition { opacity:0; transition:opacity .38s ease; }
.page-transition.is-page-ready { opacity:1; }
.page-transition.is-page-leaving { opacity:0; pointer-events:none; }
.page-transition dialog,.page-transition dialog::backdrop { transition:opacity .38s ease,background-color .38s ease,backdrop-filter .38s ease; }
.page-transition.is-page-leaving dialog,.page-transition.is-page-leaving dialog::backdrop { opacity:0; background-color:transparent; backdrop-filter:none; }
body { margin:0; min-height:100vh; display:grid; place-items:center; overflow:hidden; color:var(--ink); font-family:"Noto Sans KR","Malgun Gothic",sans-serif; background:#d3cdc1; }
button { font:inherit; } button:focus-visible,a:focus-visible { outline:3px solid #1c72a0; outline-offset:3px; }
.skip-link { position:fixed; top:-5rem; left:1rem; z-index:2; padding:.65rem 1rem; color:#111; background:#fff; }.skip-link:focus { top:1rem; }
.screen { --screen-scale:1; position:fixed; top:50%; left:50%; width:2048px; height:1152px; box-sizing:border-box; container-type:size; display:grid; grid-template-rows:24% 1fr 12%; justify-items:center; align-items:center; overflow:hidden; background:#f7f4ed; border:1px solid #777; transform:translate(-50%,-50%) scale(var(--screen-scale)); transform-origin:center; }
.title-area { grid-row:1; width:clamp(14rem,24cqw,24rem); padding:clamp(.55rem,1cqw,1rem); border:1px solid var(--line); background:#fff; text-align:center; }.title-area h1 { margin:0; font-size:clamp(1.7rem,3.6cqw,3.7rem); font-weight:700; }.title-area p { margin:.25rem 0 0; color:var(--muted); font-size:clamp(.65rem,.9cqw,.9rem); }
.utility-buttons { position:absolute; top:clamp(.7rem,1.7cqw,1.6rem); right:clamp(.7rem,1.7cqw,1.6rem); display:flex; gap:.4rem; }.utility-buttons button { width:clamp(2rem,3cqw,2.8rem); aspect-ratio:1; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; }.utility-buttons button:hover { border-color:var(--active-line); background:var(--active); }
.menu { grid-row:2; align-self:center; display:grid; gap:clamp(.45rem,.8cqw,.7rem); width:clamp(15rem,24cqw,24rem); }.menu button { min-height:clamp(2.35rem,3.9cqw,3.5rem); border:1px solid var(--line); background:#fff; color:var(--ink); font-size:clamp(.9rem,1.5cqw,1.4rem); cursor:pointer; }.menu button:hover,.menu button.is-active { border:2px solid var(--active-line); background:var(--active); color:#173f2c; }
.mask-selection { grid-row:2; align-self:center; width:min(74%,58rem); text-align:center; }.selection-heading h2 { margin:0; font-size:clamp(1.5rem,2.8cqw,2.6rem); }.selection-heading p { margin:.45rem 0 clamp(1rem,2cqh,1.7rem); color:var(--muted); font-size:clamp(.75rem,1.1cqw,1rem); }.mask-list { display:flex; justify-content:center; gap:clamp(1rem,3cqw,3.4rem); }.mask-option { width:clamp(10.5rem,22.5cqw,21rem); aspect-ratio:1; display:grid; place-items:center; overflow:visible; padding:0; border:0; background:transparent; cursor:pointer; transition:transform .2s ease; }.mask-option img { width:100%; height:100%; object-fit:contain; display:block; mix-blend-mode:multiply; transition:transform .24s ease, filter .24s ease; }.mask-option:hover,.mask-option:focus-visible,.mask-option[aria-pressed="true"] { outline:0; transform:translateY(-8px); }.mask-option:focus-visible img { filter:drop-shadow(0 0 0.3rem var(--active-line)) saturate(1.1); }.mask-option:hover img,.mask-option[aria-pressed="true"] img { transform:scale(1.1); filter:drop-shadow(0 .65rem .45rem rgb(32 83 54 / 28%)) saturate(1.1) contrast(1.05); }
.mask-selection { width:min(94%,76rem); }
.screen:not(.is-selection) .utility-buttons { display:none; }
.screen.is-selection { grid-template-rows:1fr; }.screen.is-selection .title-area,.screen.is-selection .hint { display:none; }.screen.is-selection .mask-selection { grid-row:1; }
.hint { grid-row:3; margin:0; color:var(--muted); font-size:clamp(.6rem,.8cqw,.8rem); }.live-region { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
dialog { width:31rem; max-width:none; border:1px solid var(--line); box-shadow:0 12px 30px rgb(0 0 0 / .2); color:var(--ink); background:#fff; text-align:center; } dialog::backdrop { background:rgb(0 0 0 / .25); } dialog h2 { margin-top:.3rem; font-size:1.5rem; } dialog p { color:#555; line-height:1.6; } dialog button { padding:.55rem 1.5rem; border:1px solid var(--line); color:var(--ink); background:#f2f2f2; cursor:pointer; }
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }
body { background:#080706; }.screen { color:#ddc99a; border:3px solid #75684f; background:repeating-linear-gradient(84deg,rgb(255 225 164 / 3%) 0 1px,transparent 1px 15px),linear-gradient(135deg,#0b0907,#241b12 52%,#0c0a08); box-shadow:inset 0 0 0 3px #171510,inset 0 0 0 6px #75684f,0 18px 55px rgb(0 0 0 / 55%); font-family:"Noto Serif KR","Batang","Malgun Gothic",serif; }.title-area { border:3px solid #87795e; clip-path:polygon(4% 0,96% 0,100% 13%,100% 87%,96% 100%,4% 100%,0 87%,0 13%); background:linear-gradient(135deg,#16130e,#292114 52%,#100e0b); box-shadow:inset 0 0 0 3px #171510,inset 0 0 0 5px #75684f; }.title-area h1 { color:#dfcca0; letter-spacing:.18em; text-shadow:0 2px 2px #000; }.title-area p,.selection-heading p,.hint { color:#aa9875; }.selection-heading h2 { color:#dfcca0; text-shadow:0 2px 2px #000; }.menu button,.utility-buttons button { border:3px solid #74664e; background:#15130f; box-shadow:inset 0 0 0 3px #211c15,inset 0 0 0 5px #75684f; color:#d8c28f; }.menu button:hover,.menu button.is-active,.utility-buttons button:hover { border-color:#79a47f; background:#234434; color:#dfe0b7; }.mask-option img { mix-blend-mode:normal; filter:drop-shadow(0 .5rem .45rem rgb(0 0 0 / 48%)); }.mask-option:focus-visible img,.mask-option:hover img,.mask-option[aria-pressed="true"] img { filter:drop-shadow(0 .65rem .55rem rgb(91 156 105 / 42%)) saturate(1.08) contrast(1.06); }.skip-link { border:2px solid #87795e; background:#15130f; color:#dfcca0; }dialog { border:3px solid #89795e; border-radius:4px; background:linear-gradient(135deg,#0d0c0a,#211b14 56%,#0e0d0a); box-shadow:inset 0 0 0 3px #171510,inset 0 0 0 5px #76684f,0 24px 58px rgb(0 0 0 / 62%); color:#dfca98; }dialog::backdrop { background:rgb(5 5 4 / 72%); backdrop-filter:blur(2px); }dialog h2 { color:#e2cea1; text-shadow:0 2px 2px #000; }dialog p { color:#d5c292; }dialog button { border:2px solid #8d7c5c; background:#16130f; box-shadow:inset 0 0 0 2px #3d3425; color:#dfca98; }dialog button:hover { border-color:#85b48f; background:#264332; color:#f0dca8; }

/* 메인 화면을 상자 내부와 뚜껑으로 분리한 전환 연출 */
.screen {
  display:block;
  perspective:1800px;
  isolation:isolate;
  background:#090705;
}
.box-interior {
  position:absolute;
  inset:clamp(1.15rem,2.7cqw,2.7rem);
  z-index:1;
  overflow:hidden;
  border:clamp(3px,.45cqw,7px) solid #645238;
  background:
    radial-gradient(ellipse at 50% 48%,rgb(92 48 34 / 48%),transparent 48%),
    repeating-radial-gradient(circle at 50% 50%,rgb(255 220 155 / 3%) 0 1px,transparent 1px 8px),
    linear-gradient(145deg,#1e0f0c,#080605 68%,#160c09);
  box-shadow:
    inset 0 0 0 3px #17100a,
    inset 0 0 0 7px #806744,
    inset 0 0 clamp(4.5rem,11cqw,11rem) #000,
    0 0 0 clamp(.55rem,1.35cqw,1.3rem) #120d09,
    0 0 0 clamp(.8rem,1.8cqw,1.75rem) #6d583b,
    0 0 clamp(2rem,4cqw,4rem) #000;
}
.box-interior::before,
.box-interior::after {
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
}
.box-interior::before {
  inset:clamp(.8rem,2.2cqw,2.2rem);
  border:1px solid rgb(196 159 91 / 42%);
  box-shadow:inset 0 0 0 3px rgb(0 0 0 / 55%);
  clip-path:polygon(2% 0,98% 0,100% 5%,100% 95%,98% 100%,2% 100%,0 95%,0 5%);
}
.box-interior::after {
  left:8%; right:8%; bottom:6%; height:11%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgb(0 0 0 / 58%),transparent 70%);
  filter:blur(8px);
}
.box-interior-surface {
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  padding:clamp(1.4rem,3.6cqw,3.8rem);
}
.box-lid {
  --lid-depth:clamp(5.4rem,10cqw,9.6rem);
  position:absolute;
  inset:0;
  z-index:3;
  transform-origin:50% 1%;
  transform-style:preserve-3d;
  transform:rotateX(0deg) translateZ(1px);
  transition:
    transform 1.35s cubic-bezier(.48,.03,.18,.98),
    opacity .4s ease 1.02s,
    filter .9s ease;
  will-change:transform,opacity;
}
.box-lid::before,
.box-lid::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  z-index:1;
  width:var(--lid-depth);
  border:2px solid #1d150e;
  background:
    repeating-linear-gradient(0deg,rgb(255 220 153 / 4%) 0 1px,transparent 1px 13px),
    linear-gradient(90deg,#17100b,#70583a 50%,#1a110b);
  box-shadow:inset 0 0 1.8rem #000,inset 0 .35rem .3rem rgb(216 185 126 / 22%),0 .7rem 1.2rem rgb(0 0 0 / 62%);
  pointer-events:none;
}
.box-lid::before {
  left:0;
  transform-origin:left center;
  transform:rotateY(90deg);
}
.box-lid::after {
  right:0;
  transform-origin:right center;
  transform:rotateY(-90deg);
}
.box-lid-back {
  position:absolute;
  inset:1.1%;
  z-index:0;
  transform:translateZ(calc(-1 * var(--lid-depth)));
  border:clamp(4px,.65cqw,10px) solid #5f4d35;
  background:
    repeating-linear-gradient(86deg,rgb(255 225 164 / 3%) 0 1px,transparent 1px 15px),
    radial-gradient(ellipse at 50% 45%,#342719,#0c0907 72%);
  box-shadow:inset 0 0 clamp(4rem,9cqw,9rem) #000,0 0 0 clamp(.25rem,.5cqw,.5rem) #0b0806,0 .9rem 1.8rem rgb(0 0 0 / 72%);
  pointer-events:none;
}
.box-lid-face {
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:24% 1fr 12%;
  justify-items:center;
  align-items:center;
  overflow:hidden;
  border:clamp(4px,.65cqw,10px) solid #75684f;
  background:
    linear-gradient(90deg,transparent 49.7%,rgb(210 173 103 / 7%) 50%,transparent 50.3%),
    repeating-linear-gradient(84deg,rgb(255 225 164 / 3%) 0 1px,transparent 1px 15px),
    radial-gradient(ellipse at 50% 44%,#2d2114,#0b0907 72%);
  box-shadow:
    inset 0 0 0 3px #171510,
    inset 0 0 0 7px #75684f,
    inset 0 0 clamp(3rem,8cqw,8rem) #000,
    0 .7rem 1rem rgb(0 0 0 / 68%);
  backface-visibility:hidden;
  z-index:2;
}
.box-lid-face::before {
  content:"";
  position:absolute;
  inset:clamp(1rem,2.2cqw,2.1rem);
  border:1px solid rgb(194 159 94 / 46%);
  clip-path:polygon(2% 0,98% 0,100% 5%,100% 95%,98% 100%,2% 100%,0 95%,0 5%);
  pointer-events:none;
}
.box-lid-face::after {
  content:"";
  position:absolute;
  left:46%;
  bottom:.5%;
  width:8%;
  height:4.8%;
  border:2px solid #21170f;
  clip-path:polygon(8% 0,92% 0,100% 28%,100% 100%,0 100%,0 28%);
  background:linear-gradient(90deg,#302316,#aa8c5e 48%,#3b2a19);
  box-shadow:inset 0 0 0 2px #15100b,0 -.18rem .35rem #000;
  pointer-events:none;
}
.box-lid-edge {
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:3;
  height:var(--lid-depth);
  transform:rotateX(-90deg);
  transform-origin:bottom;
  border:clamp(3px,.45cqw,7px) solid #21170f;
  background:
    linear-gradient(90deg,transparent 0 44%,rgb(202 164 97 / 30%) 44% 56%,transparent 56%),
    repeating-linear-gradient(90deg,rgb(255 222 157 / 5%) 0 1px,transparent 1px 18px),
    linear-gradient(#9c8056,#352417 32%,#110b07 78%,#715739);
  box-shadow:inset 0 .45rem .3rem rgb(232 198 134 / 22%),inset 0 -.9rem 1.7rem #000,inset 0 0 2.1rem #000,0 1.15rem 1.8rem rgb(0 0 0 / 82%);
}
.box-lid-edge::before,
.box-lid-edge::after {
  content:"";
  position:absolute;
  top:12%;
  bottom:12%;
  width:16%;
  border:2px solid rgb(181 146 86 / 55%);
  background:linear-gradient(90deg,#1a120c,#72593a,#1a120c);
  box-shadow:inset 0 0 .7rem #000;
}
.box-lid-edge::before { left:7%; }
.box-lid-edge::after { right:7%; }
.screen.is-lid-opening .box-lid,
.screen.is-selection .box-lid {
  transform:rotateX(76deg) translateY(-5.5%) translateZ(1px);
  opacity:.04;
  filter:brightness(.52);
  pointer-events:none;
}
.screen.is-closing .box-lid {
  opacity:1;
  filter:none;
  transition:transform 1.35s cubic-bezier(.48,.03,.18,.98),opacity 0s,filter .12s ease;
}
.screen.is-closing .box-lid-face .title-area,
.screen.is-closing .box-lid-face .menu button {
  opacity:0;
  transform:translateY(8px) scale(.985);
  filter:blur(2px);
  pointer-events:none;
  transition:none;
}
.screen.is-transition-instant .box-lid,
.screen.is-transition-instant .mask-selection,
.screen.is-transition-instant .title-area,
.screen.is-transition-instant .hint,
.screen.is-transition-instant .menu button {
  transition:none !important;
}
.title-area,
.hint,
.menu button {
  transition:opacity .24s ease,transform .3s ease,filter .3s ease;
}
.screen.is-opening .title-area,
.screen.is-opening .hint,
.screen.is-opening .menu button {
  opacity:0;
  transform:translateY(-12px) scale(.98);
  filter:blur(2px);
  pointer-events:none;
}
.screen.is-opening .menu button:nth-child(2) { transition-delay:.035s; }
.screen.is-opening .menu button:nth-child(3) { transition-delay:.07s; }
.screen.is-opening .menu button:nth-child(4) { transition-delay:.105s; }
.mask-selection {
  width:min(94%,76rem);
  opacity:0;
  transform:translateY(clamp(1rem,3cqh,2.2rem)) scale(.94);
  pointer-events:none;
  transition:opacity .42s ease,transform .62s cubic-bezier(.2,.76,.22,1);
}
.screen.is-selection .mask-selection {
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.screen.is-closing .mask-selection {
  opacity:0;
  transform:translateY(1.2rem) scale(.96);
}
.selection-heading {
  position:relative;
  z-index:2;
}
.selection-heading h2 { letter-spacing:.16em; }
.mask-list { position:relative; z-index:1; }
.mask-option {
  position:relative;
}
.mask-option::before {
  content:"";
  position:absolute;
  inset:8%;
  z-index:0;
  border:1px solid rgb(183 142 77 / 45%);
  border-radius:48% 48% 42% 42%;
  background:radial-gradient(circle at 50% 42%,#b39a72 0 54%,#5b412c 68%,#110b08 76%,#050403 100%);
  box-shadow:inset 0 0 2.5rem #000,0 .8rem 1.2rem rgb(0 0 0 / 62%);
  opacity:.84;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.box-interior .mask-option img {
  position:relative;
  z-index:1;
  clip-path:circle(48% at 50% 50%);
  mix-blend-mode:multiply;
  filter:drop-shadow(0 .65rem .55rem rgb(0 0 0 / 52%)) brightness(1.18) saturate(1.12) contrast(1.05);
}
.mask-option:hover::before,
.mask-option:focus-visible::before {
  border-color:#78a47d;
  box-shadow:inset 0 0 2.5rem #000,0 0 1.2rem rgb(89 153 103 / 35%);
  transform:scale(1.03);
}
.utility-buttons {
  z-index:5;
  opacity:0;
  transform:translateY(-.5rem);
  pointer-events:none;
  transition:opacity .28s ease,transform .32s ease;
}
.screen:not(.is-selection) .utility-buttons { display:flex; }
.screen.is-selection .utility-buttons {
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.screen.is-selection {
  grid-template-rows:none;
}
.screen.is-selection .title-area,
.screen.is-selection .hint {
  display:block;
}
.screen.is-selection .mask-selection { grid-row:auto; }
@media (prefers-reduced-motion:reduce) {
  .screen.is-lid-opening .box-lid,
  .screen.is-selection .box-lid { opacity:0; }
}

/* 메인 상자 나전칠기 마감 */
body {
  background:
    radial-gradient(circle at 50% 35%,rgb(54 43 29 / 42%),transparent 42%),
    #050403;
}
.screen {
  border-color:#282016;
  background:#050403;
  box-shadow:inset 0 0 0 3px #050403,inset 0 0 0 7px #5f4c35,0 20px 64px rgb(0 0 0 / 78%);
}
.box-lid-face,
.box-lid-back,
.box-interior {
  background-image:
    radial-gradient(ellipse at 50% 40%,rgb(71 56 37 / 28%),transparent 52%),
    linear-gradient(rgb(5 4 3 / 20%),rgb(5 4 3 / 58%)),
    url("../../assets/export/ui/mockups/dark-table-texture-v3.png");
  background-position:center;
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.box-lid-face::before,
.box-interior::before {
  border:clamp(18px,2.2cqw,34px) solid transparent;
  border-image-source:url("../../assets/export/ui/panels/common-boss-hud/hud-panel-large-v2.png");
  border-image-slice:30;
  border-image-width:clamp(18px,2.2cqw,34px);
  border-image-repeat:stretch;
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);
  box-shadow:none;
  opacity:.94;
}
.box-lid-face::before { inset:clamp(.7rem,1.45cqw,1.4rem); }
.box-interior::before { inset:clamp(.5rem,1.2cqw,1.1rem); }
.title-area {
  border:3px solid transparent;
  border-image:url("../../assets/export/ui/panels/common-boss-hud/hud-title-plaque-v1.png") 28 fill / 28px / 0 stretch;
  clip-path:polygon(15px 0,calc(100% - 15px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 15px) 100%,15px 100%,0 calc(100% - 12px),0 12px);
  background:#090d0c;
  box-shadow:none;
  filter:drop-shadow(0 6px 8px rgb(0 0 0 / 52%));
}
.menu button {
  border:3px solid transparent;
  border-image:url("../../assets/export/ui/panels/common-boss-hud/hud-action-button-v1.png") 28 fill / 24px / 0 stretch;
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
  background:#090d0c;
  box-shadow:none;
  color:#d9c79b;
  text-shadow:0 2px 2px #000;
  filter:drop-shadow(0 4px 5px rgb(0 0 0 / 48%));
}
.menu button:hover,
.menu button.is-active,
.menu button:focus-visible {
  border:3px solid transparent;
  border-image:url("../../assets/export/ui/panels/common-boss-hud/hud-action-button-v1.png") 28 fill / 24px / 0 stretch;
  background:#17251c;
  color:#edf0c7;
  filter:brightness(1.16) drop-shadow(0 5px 7px rgb(0 0 0 / 56%));
}
.utility-buttons button {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:0;
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
  background:transparent var(--utility-panel-image) center / 100% 100% no-repeat;
  box-shadow:none;
  color:transparent;
  text-shadow:none;
  transition:transform .16s ease,color .16s ease,text-shadow .16s ease;
}
.utility-buttons button::after { content:""; position:absolute; z-index:1; top:50%; left:50%; width:var(--utility-symbol-width); height:var(--utility-symbol-height); background:var(--utility-symbol-image) center / contain no-repeat; opacity:.96; transform:translate(-50%,-50%); pointer-events:none; }
.utility-buttons button:nth-child(1) { --utility-panel-image:url("../../assets/export/ui/panels/common-boss-hud/hud-utility-help-v1.png"); --utility-symbol-image:url("../../assets/export/ui/buttons/help-symbol-v1.png"); --utility-symbol-width:64%; --utility-symbol-height:72%; }
.utility-buttons button:nth-child(2) { --utility-panel-image:url("../../assets/export/ui/panels/common-boss-hud/hud-utility-settings-v1.png"); --utility-symbol-image:url("../../assets/export/ui/buttons/settings-symbol-v1.png"); --utility-symbol-width:68%; --utility-symbol-height:68%; }
.utility-buttons button:nth-child(3) { --utility-panel-image:url("../../assets/export/ui/panels/common-boss-hud/hud-utility-exit-v1.png"); --utility-symbol-image:url("../../assets/export/ui/buttons/exit-symbol-v1.png"); --utility-symbol-width:72%; --utility-symbol-height:64%; }
.utility-buttons button:hover,
.utility-buttons button:focus-visible { border:0; filter:brightness(1.08) drop-shadow(0 0 7px rgb(164 207 171 / 42%)); transform:translateY(-1px); }
.selection-heading {
  width:min(31rem,72cqw);
  margin:0 auto clamp(.8rem,1.6cqh,1.35rem);
  padding:clamp(.65rem,1.2cqw,1rem) clamp(2rem,4cqw,4rem);
  border:3px solid transparent;
  border-image:url("../../assets/export/ui/panels/common-boss-hud/hud-title-plaque-v1.png") 28 fill / 28px / 0 stretch;
  clip-path:polygon(15px 0,calc(100% - 15px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 15px) 100%,15px 100%,0 calc(100% - 12px),0 12px);
  background:#090d0c;
  filter:drop-shadow(0 6px 8px rgb(0 0 0 / 52%));
}

/* 상자 뚜껑의 메인 문구는 나전 바탕 위에 직접 새긴 글자처럼 표시한다. */
.box-lid-face .title-area {
  position:relative;
  top:clamp(1rem,2.4cqh,2rem);
  padding:0;
  border:0;
  clip-path:none;
  background:transparent;
  box-shadow:none;
  filter:none;
}
.box-lid-face .title-area h1 {
  font-family:"Batang","Noto Serif KR","Malgun Gothic",serif;
  font-size:clamp(2.7rem,5cqw,5.2rem);
  font-weight:700;
  letter-spacing:.22em;
  transform:translateX(.11em);
}
.box-interior .selection-heading {
  padding:0;
  border:0;
  border-image:none;
  clip-path:none;
  background:transparent;
  filter:none;
}
.box-lid-face .menu button,
.box-lid-face .menu button:hover,
.box-lid-face .menu button.is-active,
.box-lid-face .menu button:focus-visible {
  border:0;
  border-image:none;
  clip-path:none;
  background:transparent;
  box-shadow:none;
  filter:none;
}
.box-lid-face .menu button:hover,
.box-lid-face .menu button.is-active,
.box-lid-face .menu button:focus-visible {
  color:#edf0c7;
  text-shadow:0 0 12px rgb(149 210 157 / 72%),0 2px 2px #000;
  transform:scale(1.07);
}
.selection-heading p { margin:.35rem 0 0; }
.mask-option::before {
  border:2px solid transparent;
  background:
    radial-gradient(circle at 50% 42%,rgb(177 151 105 / 28%) 0 50%,transparent 69%),
    #0a0806;
  box-shadow:inset 0 0 0 2px #17120d,inset 0 0 0 5px #6f5d42,inset 0 0 2.8rem #000,0 .8rem 1.2rem rgb(0 0 0 / 68%);
}
.hint { color:#b5a47d; text-shadow:0 1px 2px #000; }
.box-lid-edge {
  border-color:#15100c;
  background:
    linear-gradient(to bottom,rgb(204 174 118 / 30%) 0 2%,#100c09 2.5% 7%,transparent 7.5% 86%,#080604 87% 94%,rgb(126 100 142 / 28%) 95% 97%,#080604 98%),
    linear-gradient(to bottom,transparent 0 7%,rgb(111 145 148 / 48%) 7.3% 8.6%,rgb(132 103 145 / 42%) 8.8% 10%,transparent 10.3%),
    linear-gradient(90deg,transparent 0 44%,rgb(187 167 119 / 26%) 44% 56%,transparent 56%),
    repeating-linear-gradient(90deg,rgb(166 198 190 / 5%) 0 1px,transparent 1px 18px),
    linear-gradient(#756d5e,#2b211a 32%,#0c0907 78%,#4f4038);
}
.box-lid::before,
.box-lid::after {
  border-color:#17120e;
  background:
    linear-gradient(90deg,rgb(111 145 148 / 16%),transparent 36%,rgb(126 100 142 / 14%) 68%,transparent),
    repeating-linear-gradient(0deg,rgb(255 220 153 / 3%) 0 1px,transparent 1px 13px),
    linear-gradient(90deg,#120e0b,#55483c 50%,#130f0c);
}
.box-lid-face {
  background-image:
    linear-gradient(rgb(4 4 3 / 12%),rgb(4 3 2 / 24%)),
    url("../../assets/export/ui/mockups/main-menu-lid-najeon-floral-v1.png");
  background-position:center;
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.box-lid-face::before,.box-lid-face::after { display:none; }
.box-interior {
  background-image:
    radial-gradient(ellipse at 50% 44%,rgb(34 27 20 / 40%),rgb(0 0 0 / 76%) 72%),
    linear-gradient(rgb(0 0 0 / 56%),rgb(0 0 0 / 72%)),
    url("../../assets/export/ui/mockups/dark-table-texture-v3.png");
  background-position:center;
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.box-interior .mask-selection { position:relative; z-index:1; }
.mask-option::before { display:none; }
.box-interior .mask-option img {
  clip-path:none;
  mix-blend-mode:normal;
  filter:drop-shadow(0 .7rem .65rem rgb(0 0 0 / 68%));
}
.mask-option:hover,
.mask-option:focus-visible,
.mask-option[aria-pressed="true"] { background:transparent; }
.mask-option:hover img,
.mask-option:focus-visible img,
.mask-option[aria-pressed="true"] img {
  transform:scale(1.1);
  filter:drop-shadow(0 .8rem .7rem rgb(0 0 0 / 72%)) drop-shadow(0 0 .55rem rgb(117 171 133 / 46%)) saturate(1.08) contrast(1.05);
}
#info-dialog {
  padding:2rem 2.2rem 1.7rem;
  border:3px solid transparent;
  border-image:url("../../assets/export/ui/panels/common-boss-hud/hud-panel-large-v2.png") 30 fill / 28px / 0 stretch;
  border-radius:0;
  background:#090d0c;
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
  box-shadow:0 24px 58px rgb(0 0 0 / 72%);
}
#info-dialog h2 { margin:.1rem 0 .7rem; padding-bottom:.65rem; border-bottom:1px solid #9e8a60; color:#ead7aa; }
#info-dialog p { color:#dbc99f; }
.settings-panel { margin:.35rem 0 1.35rem; }
.sound-control {
  padding:1rem 1.1rem 1.15rem;
  border:1px solid rgb(151 127 84 / 56%);
  background:linear-gradient(135deg,rgb(22 20 16 / 86%),rgb(9 13 12 / 94%));
  box-shadow:inset 0 0 0 2px rgb(5 4 3 / 78%),inset 0 0 1.5rem rgb(0 0 0 / 46%);
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
}
.sound-control-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.85rem; color:#ead7aa; }
.sound-control-heading label { font-weight:700; letter-spacing:.08em; }
.sound-control-heading output { min-width:3.5rem; color:#9fc3aa; font-variant-numeric:tabular-nums; text-align:right; }
#sound-volume {
  --sound-volume-level:100%;
  width:100%;
  height:1.6rem;
  margin:0;
  appearance:none;
  background:transparent;
  cursor:pointer;
}
#sound-volume::-webkit-slider-runnable-track {
  height:.4rem;
  border:1px solid #6f5e43;
  border-radius:999px;
  background:linear-gradient(90deg,#638c70 0 var(--sound-volume-level),#211c16 var(--sound-volume-level) 100%);
  box-shadow:inset 0 1px 3px #000;
}
#sound-volume::-webkit-slider-thumb {
  width:1.15rem;
  height:1.15rem;
  margin-top:-.45rem;
  appearance:none;
  border:2px solid #b69a62;
  border-radius:50%;
  background:#e7d6ad;
  box-shadow:0 0 0 3px #11100d,0 0 .55rem rgb(107 160 123 / 58%);
}
#sound-volume::-moz-range-track { height:.4rem; border:1px solid #6f5e43; border-radius:999px; background:#211c16; box-shadow:inset 0 1px 3px #000; }
#sound-volume::-moz-range-progress { height:.4rem; border-radius:999px; background:#638c70; }
#sound-volume::-moz-range-thumb { width:1.15rem; height:1.15rem; border:2px solid #b69a62; border-radius:50%; background:#e7d6ad; box-shadow:0 0 0 3px #11100d,0 0 .55rem rgb(107 160 123 / 58%); }
#sound-volume:focus-visible { outline:2px solid var(--ui-shell-teal); outline-offset:4px; }
#info-dialog button {
  min-width:8.5rem;
  min-height:2.2rem;
  padding:.3rem 1.7rem .4rem;
  border:0;
  border-image:none;
  background:transparent url("../../assets/export/ui/panels/common-boss-hud/hud-button-compact-v1.png") center bottom / 100% auto no-repeat;
  box-shadow:none;
  color:#ead7aa;
}
#info-dialog button:hover,#info-dialog button:focus-visible { background:transparent url("../../assets/export/ui/panels/common-boss-hud/hud-button-compact-v1.png") center bottom / 100% auto no-repeat; color:#f4e3b8; filter:brightness(1.14) drop-shadow(0 3px 5px rgb(0 0 0 / 52%)); }

/* v824.2 메인·탈 선택: 궤짝의 무게와 탈의 접지감을 강화한다. */
button:focus-visible,a:focus-visible { outline:2px solid var(--ui-shell-teal); outline-offset:3px; }
.box-lid-face { background-position:center; background-size:cover; }
.box-lid-face .title-area { top:clamp(1.65rem,3.6cqh,3rem); }
.box-lid-face .title-area h1 { color:var(--ui-ivory-100); text-shadow:0 2px 1px #050403,0 0 12px rgb(143 115 153 / 22%); }
.box-lid-face .menu { width:clamp(14rem,21cqw,20rem); gap:clamp(.65rem,1.15cqw,1rem); transform:translateY(-1cqh); }
.box-lid-face .menu button { min-height:clamp(2.45rem,3.7cqw,3.25rem); color:#dfcc9a; font-size:clamp(1rem,1.35cqw,1.25rem); letter-spacing:.12em; }
.box-lid-face .menu button::after { content:""; display:block; width:32%; height:1px; margin:.35rem auto 0; background:linear-gradient(90deg,transparent,var(--ui-gold-500),transparent); opacity:.45; transition:width .2s ease,opacity .2s ease; }
.box-lid-face .menu button:hover::after,.box-lid-face .menu button:focus-visible::after { width:58%; opacity:1; }
.box-lid-edge { box-shadow:inset 0 .4rem .3rem rgb(232 198 134 / 14%),inset 0 -1.15rem 2rem #000,0 1.35rem 2rem rgb(0 0 0 / 84%); }
.box-interior { box-shadow:inset 0 0 0 3px #090705,inset 0 0 0 8px #5c4934,inset 0 0 7rem #000,0 0 0 clamp(.55rem,1.35cqw,1.3rem) #0a0806,0 0 0 clamp(.8rem,1.8cqw,1.75rem) #51412f,0 0 2.4rem #000; }
.box-interior::after { bottom:4%; height:17%; background:radial-gradient(ellipse,rgb(105 139 113 / 14%),rgb(0 0 0 / 58%) 48%,transparent 72%); filter:blur(9px); }
.selection-heading h2 { color:var(--ui-ivory-100); text-shadow:0 2px 2px #000,0 0 10px rgb(109 158 151 / 22%); }
.selection-heading p { color:#c3b48c; }
.mask-list { align-items:flex-end; gap:clamp(1.6rem,4cqw,4.2rem); }
.mask-option { width:clamp(10rem,20cqw,18.2rem); }
.mask-option:nth-child(2) { width:clamp(10.7rem,21.4cqw,19.4rem); }
.mask-option:nth-child(3) { width:clamp(10.3rem,20.7cqw,18.8rem); }
.box-interior .mask-option::after { content:""; position:absolute; z-index:0; left:12%; right:12%; bottom:7%; height:9%; border-radius:50%; background:radial-gradient(ellipse,rgb(0 0 0 / 80%),transparent 70%); filter:blur(4px); transition:transform .24s ease,opacity .24s ease; }
.box-interior .mask-option img { z-index:1; filter:drop-shadow(0 .85rem .7rem rgb(0 0 0 / 76%)) brightness(1.05) contrast(1.03); }
.mask-option:hover,.mask-option:focus-visible,.mask-option[aria-pressed="true"] { transform:translateY(-7px); }
.mask-option:hover::after,.mask-option:focus-visible::after,.mask-option[aria-pressed="true"]::after { transform:scale(.88); opacity:.68; }
.mask-option:hover img,.mask-option:focus-visible img,.mask-option[aria-pressed="true"] img { transform:scale(1.055); filter:drop-shadow(0 1rem .8rem rgb(0 0 0 / 82%)) drop-shadow(0 0 .7rem rgb(105 183 152 / 48%)) saturate(1.05); }
.utility-buttons { gap:clamp(.45rem,.75cqw,.75rem); }
.utility-buttons button { width:clamp(2.15rem,3cqw,2.8rem); transition:transform .18s ease,filter .18s ease; }
.utility-buttons button:hover,.utility-buttons button:focus-visible { transform:translateY(-2px); filter:brightness(1.14) drop-shadow(0 4px 6px rgb(0 0 0 / 62%)); }

/* 탈 선택 패널: 안내문은 상단에 고정하고 탈 이미지는 기존 크기의 150%로 확대한다. */
.box-interior .mask-selection {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:clamp(1rem,2.5cqw,2rem) clamp(1.25rem,3cqw,2.75rem) clamp(1.35rem,3cqw,2.75rem);
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  align-items:start;
}
.box-interior .selection-heading {
  align-self:start;
  width:min(31rem,72cqw);
  margin:0 auto;
  transform:translateY(85px);
}
.box-interior .mask-list {
  align-self:stretch;
  width:100%;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center;
  justify-items:center;
  gap:0;
}
.box-interior .mask-option { justify-self:center; }
.box-interior .mask-option img { transform:scale(1.5); transform-origin:50% 50%; }
.box-interior .mask-option:hover img,
.box-interior .mask-option:focus-visible img,
.box-interior .mask-option[aria-pressed="true"] img { transform:scale(1.575); }
/* 2048×1152 기준 캔버스 안에서 같은 비율을 유지한 채 전체 화면과 함께 배율을 바꾼다. */
.box-lid-face .title-area { top:96px; width:576px; }
.box-lid-face .title-area h1 { font-size:124.8px; }
.box-lid-face .menu {
  width:512px;
  gap:19.2px;
  transform:translateY(24px);
}
.box-lid-face .menu button {
  width:100%;
  height:83.2px;
  min-height:83.2px;
  box-sizing:border-box;
  font-size:32px;
}
.utility-buttons { top:24px; right:59px; gap:13px; }
.utility-buttons button { width:71px; height:71px; }

/* 메인·탈 선택 팝업도 2048×1152 설계 좌표에서 화면과 같은 단일 배율을 사용한다. */
#info-dialog {
  position:fixed;
  inset:auto;
  top:50%;
  left:50%;
  width:640px;
  height:405px;
  max-width:none;
  max-height:720px;
  margin:0;
  padding:44px 48px 38px;
  overflow:auto;
  transform:translate(-50%,-50%) scale(var(--ui-scale));
  transform-origin:center;
}
#info-dialog h2 { margin:2px 0 18px; padding-bottom:16px; font-size:30px; }
#info-dialog p { font-size:22px; }
.settings-panel { margin:8px 0 28px; }
.sound-control { padding:24px 26px 28px; }
.sound-control-heading { margin-bottom:20px; font-size:24px; }
.sound-control-heading output { min-width:84px; font-size:22px; }
#sound-volume { height:38px; }
#sound-volume::-webkit-slider-runnable-track { height:10px; }
#sound-volume::-webkit-slider-thumb { width:28px; height:28px; margin-top:-10px; }
#sound-volume::-moz-range-track,#sound-volume::-moz-range-progress { height:10px; }
#sound-volume::-moz-range-thumb { width:28px; height:28px; }
#info-dialog button { min-width:220px; min-height:56px; padding:8px 28px 10px; font-size:22px; }