/* Dust & Stardust site v18 (2026-11-11): second round of Acrobat comments (site\_review\user-comments-2-2026-11-11.json).
   Loaded after css/v17.css on every page. Korean handwriting = Mapo Flower Island (option 6, Mapo-gu, free for commercial use).
   /ko/ rule: menu words, buttons, tags, short titles and piece names stay English (lang="en"); sentences are Korean. */

@font-face { font-family: "MapoFlowerIsland"; src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.4/MapoFlowerIslandA.woff") format("woff"); font-weight: 400; font-display: swap; }
html[data-v17] { --hand-ko: "Princess Sofia", "MapoFlowerIsland", "Gowun Batang", serif; } /* Latin letters (English kept on /ko/) stay in Princess Sofia, Hangul falls through to Mapo Flower Island */
/* English accents kept on /ko/ pages still use the English handwriting */
html[data-lang="ko"] .hand-eyebrow[lang="en"], html[data-lang="ko"] .hand-title { font-family: var(--hand); }

/* ---------------- header (#11): Cart + EN·한 left, logo centre, Shop · Custom Order · Contact right ---------------- */
html[data-v17] .v18-head .nav-left { display: flex !important; align-items: center; gap: 22px; }
html[data-v17] .v18-head .nav-right { display: flex; align-items: center; gap: 26px; justify-content: flex-end; }
html[data-v17] .v18-head .nav-right .nav-link-lg { display: inline; }
html[data-v17] .v18-head .menu-toggle { display: none; }
html[data-v17] .v18-head .cart-word { display: inline-flex; align-items: baseline; gap: 5px; background: none; border: 0; padding: 6px 0; cursor: pointer; font: inherit; font-size: 17px; letter-spacing: .02em; color: var(--ink); }
html[data-v17] .v18-head .cart-word svg { display: none; }
html[data-v17] .v18-head .cart-word .cart-count { position: static; min-width: 0; width: auto; height: auto; padding: 0; background: none; border: 0; border-radius: 0; color: var(--ink-soft); font-size: 14px; box-shadow: none; transform: none; }
html[data-v17] .v18-head .cart-word .cart-count::before { content: "("; }
html[data-v17] .v18-head .cart-word .cart-count::after { content: ")"; }
html[data-v17] .v18-head .cart-word:hover .cw { color: var(--lv-ink); }
@media (max-width: 900px) {
  html[data-v17] .v18-head { grid-template-columns: 1fr auto 1fr; }
  html[data-v17] .v18-head .nav-left { gap: 14px; }
  html[data-v17] .v18-head .nav-right .nav-link-lg { display: none; }
  html[data-v17] .v18-head .menu-toggle { display: inline-flex; }
  html[data-v17] .v18-head .cart-word, html[data-v17] .v18-head .lang-sw { font-size: 15px; }
}

/* ---------------- cart (#28) ---------------- */
html[data-v17] .cart-head .hand-title { font-family: var(--hand); font-weight: 400; font-size: 34px; line-height: 1.1; color: var(--hand-ink); }
html[data-v17] .cart-empty .empty-line { display: none; }

/* ---------------- ornament borrowed from "The Collection" (#03, #24) ---------------- */
.orn { display: block; width: min(300px, 70%); height: auto; margin: 10px 0 14px; opacity: .9; }
.page-head .orn { margin-left: auto; margin-right: auto; }

/* ---------------- home: softer seams (#02, #04) + the two new bag sections (#11) ---------------- */
.home-sections .scene + .scene { margin-top: -5vw; }
.home-sections .scene + .scene picture img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5vw); mask-image: linear-gradient(180deg, transparent 0, #000 5vw); }
.home-feat { position: relative; line-height: 1.5; padding: clamp(56px, 8vw, 120px) clamp(20px, 5vw, 64px); }
.hf-locket { background: linear-gradient(180deg, #FCEBD9 0%, #F6E4DF 100%); }
.hf-theatre { background: linear-gradient(180deg, #F6E4DF 0%, #E6D3E2 70%, #D4BAD6 100%); }
.home-feat + .scene { margin-top: -6vw; }
.home-feat + .scene picture img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6vw); mask-image: linear-gradient(180deg, transparent 0, #000 6vw); }
.hf-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.hf-theatre .hf-inner { grid-template-columns: 1fr 1.15fr; }
.hf-theatre .hf-art { order: 2; }
.hf-art, .hf-gilt { display: block; }
.hf-gilt img { display: block; width: 100%; height: auto; }
.hf-theatre .hf-gilt { max-width: 420px; margin: 0 auto; }
.hf-lenti { position: relative; display: block; overflow: hidden; }
.hf-lenti img.b { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: v18-lenti 5.2s ease-in-out infinite; }
@keyframes v18-lenti { 0%, 30% { opacity: 0; transform: translateX(0); } 45%, 80% { opacity: 1; transform: translateX(-.6%); } 95%, 100% { opacity: 0; transform: translateX(0); } }
.hf-copy h2 { font-size: clamp(36px, 4.4vw, 58px); line-height: 1.08; margin: 0; font-weight: 400; }
.hf-copy .hf-line { font-style: italic; font-size: 21px; margin: 0 0 22px; color: var(--ink-soft); }
html[data-lang="ko"] .hf-copy .hf-line { font-style: normal; font-size: 18px; }
.hand-eyebrow { font-family: var(--hand); font-size: 26px; line-height: 1.2; color: var(--hand-ink); margin: 0 0 4px; }
.hf-art, .hf-copy .btn { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.hf-art:hover { transform: rotate(-.8deg) translateY(-3px); }
.hf-copy .btn:hover { transform: rotate(1.2deg); }
@media (max-width: 760px) {
  .hf-inner, .hf-theatre .hf-inner { grid-template-columns: 1fr; }
  .hf-theatre .hf-art { order: 0; }
  .hf-copy { text-align: center; }
  .hf-copy .orn { margin: 10px auto 14px; }
  .home-sections .scene + .scene, .home-feat + .scene { margin-top: -8vw; }
}
@media (prefers-reduced-motion: reduce) { .hf-lenti img.b { animation: none; } .hf-art:hover, .hf-copy .btn:hover { transform: none; } }

/* ---------------- Custom Order letter (#06-#09): torn pale kraft, a thin gold edge, every line of text centred between the rules ---------------- */
.v18-letter-sec { padding-top: clamp(32px, 5vw, 64px); }
html[data-v17] #wish-form-wrap { max-width: 760px; margin: 0 auto; filter: drop-shadow(.8px 0 0 #c5a462) drop-shadow(-.8px 0 0 #c5a462) drop-shadow(0 .8px 0 #c5a462) drop-shadow(0 -.8px 0 #c5a462) drop-shadow(0 10px 22px rgba(80, 60, 40, .14)); }
html[data-v17] .letter { --ln: 36px; max-width: none; border: 0; box-shadow: none;
  clip-path: polygon(0% 1.9px, 4% 1.7px, 8% 3.4px, 12% 3.8px, 16% 3.3px, 20% 3px, 24% 7.8px, 28% 4.3px, 32% 2.4px, 36% 7.4px, 40% 4.9px, 44% 4.6px, 48% 1px, 52% 6.8px, 56% 5.1px, 60% 2.9px, 64% 4px, 68% 2.1px, 72% 2.2px, 76% 3px, 80% 2.5px, 84% 2.8px, 88% 1.2px, 92% 3.2px, 96% 4.2px, 100% 1.7px, calc(100% - 3.5px) 3%, calc(100% - 6px) 6%, calc(100% - 4.1px) 9%, calc(100% - 4.5px) 12%, calc(100% - 6px) 15%, calc(100% - 2.2px) 18%, calc(100% - 4.2px) 21%, calc(100% - 3.6px) 24%, calc(100% - 6.6px) 27%, calc(100% - 4.3px) 30%, calc(100% - 6.6px) 33%, calc(100% - 4.9px) 36%, calc(100% - 3.6px) 39%, calc(100% - 2.1px) 42%, calc(100% - 2.9px) 45%, calc(100% - 5.3px) 48%, calc(100% - 3.5px) 51%, calc(100% - 2.9px) 54%, calc(100% - 3.4px) 57%, calc(100% - 4.9px) 60%, calc(100% - 3.8px) 63%, calc(100% - 5.4px) 66%, calc(100% - 6.4px) 69%, calc(100% - 4.6px) 72%, calc(100% - 4px) 75%, calc(100% - 6px) 78%, calc(100% - 5.2px) 81%, calc(100% - 1.9px) 84%, calc(100% - 5.8px) 87%, calc(100% - 6.2px) 90%, calc(100% - 1.4px) 93%, calc(100% - 1.2px) 96%, 100% calc(100% - 8.5px), 96% calc(100% - 2.8px), 92% calc(100% - 8px), 88% calc(100% - 2px), 84% calc(100% - 8.6px), 80% calc(100% - 6px), 76% calc(100% - 1.6px), 72% calc(100% - 3.9px), 68% calc(100% - 8.9px), 64% calc(100% - 5.5px), 60% calc(100% - 8.2px), 56% calc(100% - 1.3px), 52% calc(100% - 3.6px), 48% calc(100% - 7.2px), 44% calc(100% - 6.8px), 40% calc(100% - 8.9px), 36% calc(100% - 8.7px), 32% calc(100% - 4.9px), 28% calc(100% - 7.8px), 24% calc(100% - 6.8px), 20% calc(100% - 8.4px), 16% calc(100% - 7.5px), 12% calc(100% - 6.1px), 8% calc(100% - 6.4px), 4% calc(100% - 8.5px), 0% calc(100% - 8.3px), 1.5px 97%, 1px 94%, 4px 91%, 3.3px 88%, 4.8px 85%, 1.4px 82%, 3.9px 79%, 6.5px 76%, 5.3px 73%, 2.2px 70%, 2.8px 67%, 2.2px 64%, 5.6px 61%, 5.7px 58%, 2.4px 55%, 1.2px 52%, 5px 49%, 6.4px 46%, 6px 43%, 6.2px 40%, 2.6px 37%, 5.3px 34%, 1.6px 31%, 5.3px 28%, 2.2px 25%, 2.8px 22%, 1.1px 19%, 3px 16%, 1.6px 13%, 1.7px 10%, 4.5px 7%, 2.3px 4%);
  padding: var(--ln) clamp(24px, 6vw, 64px) calc(var(--ln) * 2);
  background-color: #EEDFC8;
  background-image:
    linear-gradient(180deg, transparent calc(var(--ln) - 1px), rgba(128, 94, 58, .26) calc(var(--ln) - 1px)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .33  0 0 0 0 .2  0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .35' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .38  0 0 0 0 .22  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% 40%, rgba(255, 250, 240, .55), rgba(214, 190, 150, .25));
  background-size: 100% var(--ln), 220px 220px, 300px 300px, 100% 100%;
  background-position: 0 0;
  background-repeat: repeat, repeat, repeat, no-repeat; }
html[data-v17] .letter-dear { height: calc(var(--ln) * 2); line-height: calc(var(--ln) * 2); margin: 0; }
html[data-v17] .letter-intro, html[data-v17] .letter label, html[data-v17] .letter .lab, html[data-v17] .letter .agree-one, html[data-v17] .letter .form-err, html[data-v17] .letter-sign, html[data-v17] .letter-sign small { line-height: var(--ln); }
html[data-v17] .letter-intro { margin: 0 0 var(--ln); font-size: 19px; }
html[data-v17] .letter .f { margin: 0 0 var(--ln); }
html[data-v17] .letter label, html[data-v17] .letter .lab { margin: 0; font-size: 18px; }
html[data-v17] .letter .opt { font-size: 15px; }
html[data-v17] .letter input[type="text"], html[data-v17] .letter input[type="email"], html[data-v17] .letter textarea {
  display: block; box-sizing: border-box; width: 100%; height: var(--ln); line-height: var(--ln); padding: 0 6px; margin: 0; border: 0; border-radius: 0; background: transparent; font-size: 19px; color: var(--ink); }
html[data-v17] .letter input:focus, html[data-v17] .letter textarea:focus { outline: none; background: rgba(255, 252, 245, .45); }
html[data-v17] .letter .invalid { background: rgba(214, 120, 120, .14) !important; }
html[data-v17] .letter textarea { height: calc(var(--ln) * 4); min-height: calc(var(--ln) * 4); resize: none; }
html[data-v17] .letter ::placeholder { color: rgba(90, 70, 50, .5); font-style: italic; }
html[data-v17] .letter .two { column-gap: 20px; row-gap: 0; }
html[data-v17] .letter .upload-btn { height: var(--ln); min-height: 0; line-height: calc(var(--ln) - 2px); padding: 0 22px; margin: 0; display: inline-flex; align-items: center; font-size: 16px; }
html[data-v17] .letter .thumbs-row:not(:empty) { margin-top: var(--ln); display: flex; gap: 8px; }
html[data-v17] .letter .thumbs-row img { height: calc(var(--ln) * 2); width: auto; }
html[data-v17] .letter .agree-one { margin: 0 0 var(--ln); font-size: 16px; }
html[data-v17] .letter .agree-one input { margin-top: calc((var(--ln) - 19px) / 2); }
html[data-v17] .letter #w-send { height: var(--ln); min-height: 0; line-height: calc(var(--ln) - 2px); padding: 0 24px; margin: 0; }
html[data-v17] .letter-sign { margin: var(--ln) 0 0; font-size: 28px; }
html[data-v17] .letter-sign small { margin: 0; font-size: 15px; }
html[data-v17] .letter .form-err:empty { display: none; }
@media (max-width: 640px) { html[data-v17] .letter { --ln: 34px; } html[data-v17] .letter .two { grid-template-columns: 1fr; } }

/* ---------------- Shop rail (#13): round end caps, like a curtain rod floating in the air ---------------- */
:root[data-look="frame"][data-tabs="cord"] .tk:first-child::before, :root[data-look="frame"][data-tabs="cord"] .tk:last-child::before { -webkit-mask-image: none; mask-image: none; }
:root[data-look="frame"][data-tabs="cord"] .tk:first-child::before { left: 0; }
:root[data-look="frame"][data-tabs="cord"] .tk:last-child::before { right: 0; }
:root[data-look="frame"][data-tabs="cord"] .tk { position: relative; }
:root[data-look="frame"][data-tabs="cord"] .tk:first-child > .v18-cap, :root[data-look="frame"][data-tabs="cord"] .tk:last-child > .v18-cap { display: block; }
.v18-cap { display: none; position: absolute; top: -4px; width: 13px; height: 13px; border-radius: 50%; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at 35% 32%, #fff7e2 0 18%, #e7cf98 40%, #b48c4a 78%, #8d6a33 100%); box-shadow: 0 1px 2px rgba(74, 58, 46, .25); }
.tk:first-child > .v18-cap { left: -10px; }
.tk:last-child > .v18-cap { right: -10px; }

/* ---------------- Shop: the two bag cards (#11) ---------------- */
.sh-feature .lb-ooak { font-family: var(--hand); font-size: 20px; color: var(--hand-ink); letter-spacing: 0; text-transform: none; }

/* ---------------- footer bridge (#24) ---------------- */
html[data-v17] .foot-brand .orn { width: 210px; margin: 6px 0 10px; }
html[data-v17] .foot-ig { display: inline-flex; align-items: center; gap: 8px; }
html[data-v17] .foot-ig img { width: 26px; height: 26px; }
.orn-c { margin: 4px auto 10px; }

/* letter grid fix: flex columns remove baseline gaps; inputs exactly one rule tall */
html[data-v17] .letter .f { display: flex; flex-direction: column; align-items: stretch; line-height: var(--ln); }
html[data-v17] .letter .f > * { flex: none; }
html[data-v17] .letter .f > .upload-btn { align-self: flex-start; }
html[data-v17] .letter input[type="text"], html[data-v17] .letter input[type="email"] { min-height: 0 !important; height: var(--ln) !important; }
html[data-v17] .letter .two { align-items: start; }
html[data-v17] .letter .agree-one { line-height: var(--ln); }
html[data-v17] .letter .f { gap: 0; }
html[data-v17] .letter .thumbs-row:empty { display: none; }
html[data-v17] .v18-head .cart-word .cart-count { display: inline !important; white-space: nowrap; width: auto !important; min-width: 0 !important; line-height: inherit; }
html[data-v17] .letter label .opt { white-space: nowrap; }

/* ---------------- home motion layers (#13, js/home-motion.js + img/home/layers.json) ---------------- */
.scene .hm { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .35s ease; line-height: 0; }
.scene .hm.is-ready { opacity: 1; }
.scene .hm > .hm-plate, .scene .hm > .hm-sign { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene .hs { z-index: 2; }
.scene + .scene .hm { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5vw); mask-image: linear-gradient(180deg, transparent 0, #000 5vw); }
.home-feat + .scene .hm { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6vw); mask-image: linear-gradient(180deg, transparent 0, #000 6vw); }
.hm-sign, .hm-card { will-change: transform; }
.hm-sign.is-sway, .hm-card.is-sway { animation: hm-sway 1.6s cubic-bezier(.36, .07, .19, .97); }
@keyframes hm-sway { 0% { transform: rotate(0); } 16% { transform: rotate(2deg); } 36% { transform: rotate(-1.5deg); } 56% { transform: rotate(.9deg); } 76% { transform: rotate(-.4deg); } 100% { transform: rotate(0); } }
/* a soft glint over each bag on stage */
.hm-glint { position: absolute; display: block; }
.hm-glint i { position: absolute; width: 14%; aspect-ratio: 1; opacity: 0; transform: translate(-50%, -50%) scale(.4);
  background: radial-gradient(circle, rgba(255, 252, 236, .95) 0 10%, rgba(255, 236, 180, .55) 22%, transparent 60%); }
.hm-glint i::before, .hm-glint i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 140%; height: 6%; transform: translate(-50%, -50%); background: linear-gradient(90deg, transparent, rgba(255, 247, 214, .9), transparent); }
.hm-glint i::after { transform: translate(-50%, -50%) rotate(90deg); }
.hm-glint i:nth-child(1) { left: 28%; top: 30%; }
.hm-glint i:nth-child(2) { left: 70%; top: 46%; width: 10%; }
.hm-glint i:nth-child(3) { left: 44%; top: 72%; width: 8%; }
.hm-glint.is-sway i { animation: hm-glint 1.4s ease-out both; }
.hm-glint.is-sway i:nth-child(2) { animation-delay: .18s; }
.hm-glint.is-sway i:nth-child(3) { animation-delay: .34s; }
@keyframes hm-glint { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0); } 35% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(25deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(45deg); } }
/* the seven light bulbs above the booth glow slowly, a little brighter while the booth is hovered */
.hm-bulb { position: absolute; width: 2.4%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 238, 196, .95) 0 14%, rgba(255, 214, 150, .45) 34%, transparent 70%); opacity: .18; animation: hm-bulb 4.6s ease-in-out infinite alternate; }
.hm-3 .hm-bulb { width: 2.2%; }
@media (max-width: 768px) { .hm-bulb { width: 4.6%; } }
@keyframes hm-bulb { 0% { opacity: .14; } 100% { opacity: .62; } }
.scene[data-sec="3"]:hover .hm-bulb, .hm.is-lit .hm-bulb { animation-duration: 2.2s; }
/* with motion layers the hotspot glow box is not needed on hover (keyboard focus keeps it) */
.scene .hs:hover:not(:focus-visible) { background: none; box-shadow: none; }

html[data-v17][data-lang="ko"] .letter-dear { font-size: 48px; }

/* ---------------- v19 (2026-11-12): seams retuned to the redrawn home art (edge colours sampled from img/home/v19) ----------------
   sec1 bottom #FCE3C8 -> sec2 top #F7E6D9 (5vw fade); sec2 bottom #FAE6D2 -> Locket section; Theatre section -> sec3 top #E1B4C2 (phone #C6A4CA) */
.hf-locket { background: linear-gradient(180deg, #FAE6D2 0%, #F6E1DA 100%); }
.hf-theatre { background: linear-gradient(180deg, #F6E1DA 0%, #EECFD0 60%, #E1B4C2 100%); }
@media (max-width: 768px) {
  .hf-locket { background: linear-gradient(180deg, #FCE5CE 0%, #F4DDD8 100%); }
  .hf-theatre { background: linear-gradient(180deg, #F4DDD8 0%, #DCC2D6 60%, #C6A4CA 100%); }
}
/* v19: the sky section's tagline now sits right at its top edge, so the 1 -> 2 seam is a short 2vw fade (edge colours are already close) */
.home-sections .scene + .scene { margin-top: -2vw; }
.home-sections .scene + .scene picture img, .scene + .scene .hm { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 2vw); mask-image: linear-gradient(180deg, transparent 0, #000 2vw); }
@media (max-width: 760px) { .home-sections .scene + .scene { margin-top: -3vw; } .home-sections .scene + .scene picture img, .scene + .scene .hm { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 3vw); mask-image: linear-gradient(180deg, transparent 0, #000 3vw); } }