/* BASIC css start */
@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');

/* Optional remote artwork must never leave the browser's broken-image glyph,
   alt text, or question-mark placeholder in the mobile layout. */
img.succubus-image-failed{display:none!important;}

/* 헤더  */
#header{--header-ink:#2f2525; box-sizing:border-box; width: 100%; height:70px; min-width: 320px; max-width: 850px; margin: 0 auto; position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index:92; color:var(--header-ink); background-color:rgba(247,244,239,.34); border-bottom:1px solid rgba(255,255,255,.24); -webkit-backdrop-filter:blur(16px) saturate(1.04); backdrop-filter:blur(16px) saturate(1.04); isolation:isolate; transition:background-color .6s, color .6s;}
#header.bg{background-color:rgba(247,244,239,.58); color:#2f2525;}
#header.header-night,
 #header.is-night,
 html.succubus-night #header{--header-ink:#fff5ef; background-color:rgba(32,32,32,.36); border-bottom-color:rgba(255,245,239,.18); color:var(--header-ink);}
#header.header-night.bg,
 #header.is-night.bg,
 html.succubus-night #header.bg{--header-ink:#fff5ef; background-color:rgba(32,32,32,.56); color:var(--header-ink);}
/* The local phone preview uses a scoped class instead of the platform #header id. */
.preview-shell .preview-header{background-color:rgba(247,244,239,.34); background-image:none; border-bottom:1px solid rgba(255,255,255,.24); -webkit-backdrop-filter:blur(16px) saturate(1.04); backdrop-filter:blur(16px) saturate(1.04); isolation:isolate;}
.preview-shell .preview-header.is-night,
html.succubus-preload-night .preview-shell .preview-header,
html.succubus-night .preview-shell .preview-header{background-color:rgba(32,32,32,.36); background-image:none; border-bottom-color:rgba(255,245,239,.18); color:#fff5ef;}
#header .head_inner{box-sizing:border-box; width: 100%; height:100%; padding: 0 15px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center;}
#header .head_menu{display:flex; align-items:center; justify-content:flex-start; gap:8px; position:relative; z-index:2;}
#header .head_inner h1.logo{grid-column:2; grid-row:1; width:100%; max-width:191px; min-width:0; margin:0; line-height:0; overflow:visible;}
#header .head_inner h1.logo a{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; max-width:100%; min-width:0; height:60px; color:inherit; text-decoration:none; white-space:nowrap;}
#header .head_inner h1.logo .logo__avatar{display:block; flex:0 0 34px; width:34px; height:34px; object-fit:contain; object-position:center; filter:drop-shadow(0 1px 0 rgba(255,255,255,.7));}
#header .head_inner h1.logo .logo__wordmark{display:block; flex:0 1 auto; min-width:0; color:var(--header-ink); font:400 32px/.82 'Allura','Segoe Script','Brush Script MT',cursive; letter-spacing:0; text-indent:0;}
#header.header-night .head_inner h1.logo .logo__avatar,
#header.is-night .head_inner h1.logo .logo__avatar,
html.succubus-night #header .head_inner h1.logo .logo__avatar{filter:drop-shadow(0 0 3px rgba(255,255,255,.72));}
#header .head_inner .ham{display:flex; align-items:center;}
#header .head_inner .ham a,
#header .head_actions .head_action{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:0; background:transparent; color:inherit; font:inherit; text-decoration:none; cursor:pointer;}
#header .header_theme_toggle,
aside .header_theme_toggle{display:inline-flex; align-items:center; justify-content:center; flex:0 0 44px; width:44px; height:32px; padding:0; border:0; color:currentColor; background:transparent; cursor:pointer;}
#header .header_theme_toggle__track,
aside .header_theme_toggle__track{position:relative; display:block; width:38px; height:20px; box-sizing:border-box; border:1px solid currentColor; border-radius:999px; color:currentColor; background:var(--theme-toggle-track,rgba(17,17,17,.08)); transition:background-color .3s ease,border-color .3s ease;}
#header .header_theme_toggle__track::before,
aside .header_theme_toggle__track::before{content:""; position:absolute; z-index:2; top:3px; left:3px; width:12px; height:12px; border-radius:50%; background:var(--theme-toggle-thumb,#fff); box-shadow:0 1px 4px rgba(26,13,21,.3); transition:transform .35s cubic-bezier(.22,.61,.36,1),background-color .3s ease;}
#header .header_theme_toggle__sun,
#header .header_theme_toggle__moon,
aside .header_theme_toggle__sun,
aside .header_theme_toggle__moon{position:absolute; z-index:1; display:block; pointer-events:none;}
#header .header_theme_toggle__sun,
aside .header_theme_toggle__sun{left:5px; top:6px; width:6px; height:6px; box-sizing:border-box; border:1px solid currentColor; border-radius:50%;}
#header .header_theme_toggle__moon,
aside .header_theme_toggle__moon{right:5px; top:5px; width:10px; height:10px; border-radius:50%; background:currentColor;}
#header .header_theme_toggle__moon::after,
aside .header_theme_toggle__moon::after{content:""; position:absolute; top:-1px; left:4px; width:9px; height:9px; border-radius:50%; background:var(--theme-toggle-track,rgba(17,17,17,.08));}
#header .header_theme_toggle.is-active .header_theme_toggle__track::before,
aside .header_theme_toggle.is-active .header_theme_toggle__track::before{transform:translateX(20px); background:var(--theme-toggle-thumb-active,#111);}
#header .header_theme_toggle:focus-visible,
aside .header_theme_toggle:focus-visible{outline:1px solid currentColor; outline-offset:3px;}
#header.header-night .header_theme_toggle,
#header.is-night .header_theme_toggle,
html.succubus-night #header .header_theme_toggle,
html.succubus-night aside .header_theme_toggle{--theme-toggle-track:rgba(255,255,255,.12); --theme-toggle-thumb:#fff; --theme-toggle-thumb-active:#111; color:#fff;}
#header.header-day .header_theme_toggle,
#header.is-day .header_theme_toggle,
html.succubus-day aside .header_theme_toggle{--theme-toggle-track:rgba(17,17,17,.08); --theme-toggle-thumb:#fff; --theme-toggle-thumb-active:#111; color:#111;}
#header .head_inner .ham a,
#header .head_inner .ham a:visited,
#header .head_inner .ham a:hover,
#header .head_inner .ham a:focus,
#header .head_inner .ham a:active,
#header .head_inner .ham a[aria-expanded="true"]{color:var(--header-ink)!important;}
#header .head_actions{grid-column:3; grid-row:1; display:flex; align-items:center; justify-content:flex-end; gap:12px;}
#header .header_icon{position:relative; display:block; color:currentColor;}
#header .header_icon--menu{width:22px; height:16px; border-top:1px solid var(--header-ink)!important; border-bottom:1px solid var(--header-ink)!important; color:var(--header-ink)!important; transition:border-color .2s ease;}
#header .header_icon--menu::after{content:""; position:absolute; top:50%; left:0; width:100%; height:1px; background:var(--header-ink)!important; transform:translateY(-50%); transition:transform .2s ease,background-color .2s ease;}
#header .header_icon--menu::before{content:""; position:absolute; top:50%; left:0; width:100%; height:1px; background:var(--header-ink)!important; opacity:0; transform:translateY(-50%) rotate(45deg); transition:opacity .2s ease,transform .2s ease,background-color .2s ease;}
#header .head_inner .ham a[aria-expanded="true"] .header_icon--menu{border-top-color:transparent!important; border-bottom-color:transparent!important;}
#header .head_inner .ham a[aria-expanded="true"] .header_icon--menu::before{opacity:1; transform:translateY(-50%) rotate(45deg);}
#header .head_inner .ham a[aria-expanded="true"] .header_icon--menu::after{transform:translateY(-50%) rotate(-45deg);}
#header .header_icon--account{display:none!important;}
#header .header_icon--search{width:18px; height:18px; object-fit:contain; filter:none;}
#header.header-night .header_icon--search,
#header.is-night .header_icon--search{filter:none;}
#header .header_icon--bag{width:24px; height:28px; margin:0;}
#header .header_icon--bag svg{display:block; width:24px; height:28px; fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round;}
#header .head_inner .ham a img{display:none;}

/* 상단 검색 패널: Makeshop 검색 폼을 한 곳에서만 렌더링하고, 검색 아이콘을 누르면 헤더 아래로 이동시킵니다. */
#header_search_panel{--search-bg:rgba(255,248,243,.72); --search-ink:#302526; --search-muted:#987e78; --search-line:rgba(74,57,48,.22); --search-glow:rgba(199,132,126,.2); --search-ring:rgba(74,57,48,.08); --search-close-bg:#fff8f3; width:100%; min-width:320px; max-width:850px; max-height:calc(100vh - var(--store-header-height,70px)); position:fixed; top:70px; left:50%; z-index:89; isolation:isolate; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; transform:translate(-50%,-14px); opacity:0; visibility:hidden; pointer-events:none; color:var(--search-ink); background:radial-gradient(circle at 50% -16%,rgba(255,255,255,.58) 0 15%,transparent 46%),radial-gradient(circle at 88% 20%,rgba(212,166,153,.16),transparent 30%),repeating-linear-gradient(135deg,rgba(130,94,82,.035) 0 1px,transparent 1px 19px),var(--search-bg); -webkit-backdrop-filter:blur(18px) saturate(1.08); backdrop-filter:blur(18px) saturate(1.08); border-bottom:1px solid var(--search-line); box-shadow:0 18px 30px rgba(47,37,37,.1); transition:transform .35s ease,opacity .25s ease,visibility 0s linear .35s;}
/* Decorative marks stay clear of the close control's reserved top-right zone. */
#header_search_panel::before{content:""; position:absolute; z-index:0; left:40%; top:-89px; width:240px; height:166px; transform:translateX(-50%); border:1px solid var(--search-line); border-radius:50%; box-shadow:0 0 0 14px var(--search-ring),0 0 48px var(--search-glow); pointer-events:none;}
#header_search_panel::after{display:none;}
#header_search_panel.is-open{transform:translate(-50%,0); opacity:1; visibility:visible; pointer-events:auto; transition:none;}
#header_search_panel .header_search_panel__inner{position:relative; z-index:1; padding:16px 15px 20px;}
#header_search_panel .header_search_panel__top{display:flex; align-items:center; justify-content:space-between; min-height:26px; margin-bottom:11px;}
#header_search_panel .header_search_panel__eyebrow{color:var(--search-muted); font-family:'Jost',sans-serif; font-size:10px; font-weight:600; letter-spacing:.18em; line-height:1.4;}
#header_search_panel .header_search_panel__close{position:relative; z-index:2; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; flex:0 0 26px; padding:0; border:0; border-radius:50%; background:var(--search-close-bg); color:var(--search-ink); box-shadow:0 0 0 3px var(--search-close-bg); cursor:pointer;}
#header_search_panel .header_search_panel__close::before,
#header_search_panel .header_search_panel__close::after{content:""; position:absolute; left:4px; top:12px; width:18px; height:1px; background:currentColor;}
#header_search_panel .header_search_panel__close::before{transform:rotate(45deg);}
#header_search_panel .header_search_panel__close::after{transform:rotate(-45deg);}
#header_search_panel .header_search_panel__slot .search{display:block; position:relative; width:100%; height:46px; border:1px solid var(--search-line); background:rgba(255,255,255,.58); box-shadow:0 8px 22px rgba(74,57,48,.08);}
#header_search_panel .header_search_panel__slot .search fieldset{width:100%; height:44px; margin:0; padding:0; border:0;}
#header_search_panel .header_search_panel__slot .search input{display:block; width:calc(100% - 50px); height:44px; margin:0; padding:0 12px; border:0!important; outline:0; background:transparent!important; color:var(--search-ink); font-family:'Noto Sans KR',sans-serif; font-size:14px;}
#header_search_panel .header_search_panel__slot .search input::placeholder{color:var(--search-muted); font-family:'Jost','Noto Sans KR',sans-serif; font-size:11px; letter-spacing:.13em;}
#header_search_panel .header_search_panel__slot .search input:focus{box-shadow:none;}
#header_search_panel .header_search_panel__slot .search a.btn{display:block; position:absolute; top:0; right:0; width:48px; height:44px; padding:0; background:url(//skin.makeshop.co.kr/skin/boutique/MO_img/search.png) no-repeat center center; background-size:18px; filter:none; text-indent:-9999px;}
.header-search-placeholder{display:block; width:100%; height:0; overflow:hidden;}
.header-search-source{position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; overflow:hidden!important; opacity:0!important; pointer-events:none!important;}

#header_search_panel .header_search_panel__discovery{position:relative; z-index:1; margin-top:28px; padding-top:20px; border-top:1px solid var(--search-line);}
#header_search_panel .header_search_panel__discovery-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;}
#header_search_panel .header_search_panel__discovery-head span:first-child{color:var(--search-muted); font:600 10px/1.3 'Jost',sans-serif; letter-spacing:.18em;}
#header_search_panel .header_search_panel__discovery-head span:last-child{color:var(--search-muted); font:500 9px/1.3 'Jost',sans-serif; letter-spacing:.13em; opacity:.72;}
#header_search_panel .header_search_panel__discovery-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}
#header_search_panel .header_search_panel__discovery-grid a{position:relative; display:flex; align-items:center; gap:8px; min-height:54px; padding:0 10px; border:1px solid var(--search-line); border-radius:3px; background:rgba(255,255,255,.22); color:var(--search-ink); text-decoration:none; transition:background-color .25s ease,border-color .25s ease,transform .25s ease;}
#header_search_panel .header_search_panel__discovery-grid a:hover,
#header_search_panel .header_search_panel__discovery-grid a:focus-visible{background:rgba(255,255,255,.52); border-color:var(--search-muted); outline:none; transform:translateY(-1px);}
#header_search_panel .header_search_panel__discovery-number{color:var(--search-muted); font:500 9px/1 'Jost',sans-serif; letter-spacing:.08em;}
#header_search_panel .header_search_panel__discovery-name{min-width:0; color:var(--search-ink); font:600 10px/1.2 'Jost',sans-serif; letter-spacing:.1em; white-space:nowrap;}
#header_search_panel .header_search_panel__discovery-arrow{position:relative; display:block; flex:0 0 14px; width:14px; height:14px; margin-left:auto; color:var(--search-muted); font-size:0; line-height:0;}
#header_search_panel .header_search_panel__discovery-arrow::before{content:""; position:absolute; right:1px; top:1px; width:7px; height:7px; border-top:1px solid currentColor; border-right:1px solid currentColor;}
#header_search_panel .header_search_panel__discovery-arrow::after{content:""; position:absolute; right:2px; top:3px; width:11px; height:1px; background:currentColor; transform:rotate(-45deg); transform-origin:right center;}
#header_search_panel .header_search_panel__discovery-note{margin:18px 0 0; color:var(--search-muted); font:italic 14px/1.5 Georgia,'Times New Roman',serif; letter-spacing:.02em;}

/* Search modal owns the page while it is open; the document behind it must not scroll. */
html.search-panel-open,
html.search-panel-open body{overflow:hidden; overscroll-behavior:none;}

/* Closing SEARCH YOUR SIDE is atomic. Do not let the panel/mascot fade out
   over a temporarily hidden homepage; that produced a hero-only flash before
   the home card returned. */
html.search-panel-closing #header_search_panel,
body.search-panel-closing #header_search_panel{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translate(-50%,18px) !important;
    transition:none !important;
}
html.search-panel-closing .header_search_panel__mascot,
body.search-panel-closing .header_search_panel__mascot{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translate(-50%,12px) !important;
    transition:none !important;
}
body.search-panel-closing.succubus-home-page #sec1[data-home-hero-schedule] .home-hero-lower-ui{
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
}

/* Search mascot: it begins below the fixed header and follows the DAY/NIGHT state. */
.header_search_panel__mascot{display:block; position:fixed; z-index:91; top:var(--store-header-height,70px); left:50%; width:100vw; min-width:100vw; max-width:none; height:32vh; overflow:visible; -webkit-clip-path:inset(0 0 -56px 0); clip-path:inset(0 0 -56px 0); background:transparent; pointer-events:none; user-select:none; touch-action:none; cursor:default; isolation:isolate; opacity:0; visibility:hidden; transform:translate(-50%,12px); transition:opacity .35s ease, visibility 0s linear .35s, transform .45s cubic-bezier(.22,.61,.36,1);}
.header_search_panel__mascot::before{content:""; position:absolute; z-index:0; inset:0; pointer-events:none; background:rgba(255,248,243,.12); backdrop-filter:blur(14px) saturate(1.08); -webkit-backdrop-filter:blur(14px) saturate(1.08); -webkit-mask-image:none !important; mask-image:none !important; -webkit-mask-repeat:initial !important; mask-repeat:initial !important; -webkit-mask-size:initial !important; mask-size:initial !important; -webkit-mask-position:initial !important; mask-position:initial !important;}
#header_search_panel.is-open + .header_search_panel__mascot{opacity:1; visibility:visible; transform:translate(-50%,0); transition:none;}
.header_search_panel__mascot-image{position:absolute; z-index:1; left:50%; right:auto; top:0; bottom:auto; display:block; width:auto; max-width:none; height:100%; object-fit:contain; object-position:center bottom; pointer-events:none; filter:none;}
/* Keep both mascot assets proportional; their native-ratio boxes and
   position stay unchanged while the search sheet is lowered below them. */
.header_search_panel__mascot-image--human{top:auto; bottom:-56px; left:50%; width:100vw; max-width:none; height:auto; transform:translateX(-50%); transform-origin:center bottom;}
/* v9 is a wide native-ratio rectangle from the remote GCS asset. Fit it to
   the phone width so both wings stay inside the canvas. The search sheet is
   positioned below this unchanged artwork by the shared clearance value. */
.header_search_panel__mascot-image--succubus{left:50%; right:auto; top:auto; bottom:-56px; width:100vw; max-width:none; height:auto; object-fit:contain; object-position:center bottom; transform:translateX(-50%); transform-origin:center bottom; filter:none; outline:0; border:0; box-shadow:none;}
.header_search_panel__mascot-image--succubus{display:none;}
body.succubus-night .header_search_panel__mascot-image--human{display:none;}
body.succubus-night .header_search_panel__mascot-image--succubus{display:block;}
body[data-mascot-mode="human"] .header_search_panel__mascot-image--human,
html[data-mascot-mode="human"] .header_search_panel__mascot-image--human{display:block;}
body[data-mascot-mode="human"] .header_search_panel__mascot-image--succubus,
html[data-mascot-mode="human"] .header_search_panel__mascot-image--succubus{display:none;}
body[data-mascot-mode="succubus"] .header_search_panel__mascot-image--human,
html[data-mascot-mode="succubus"] .header_search_panel__mascot-image--human{display:none;}
body[data-mascot-mode="succubus"] .header_search_panel__mascot-image--succubus,
html[data-mascot-mode="succubus"] .header_search_panel__mascot-image--succubus{display:block;}
/* 首页搜索从人物下方的功能面板出现，分类页等其他页面仍使用上方基础位置。 */
body.succubus-home-page #header_search_panel{top:calc(var(--store-header-height,70px) + 32vh); height:calc(100vh - (var(--store-header-height,70px) + 32vh)); max-height:calc(100vh - (var(--store-header-height,70px) + 32vh)); overflow-y:auto; border-bottom:0; border-radius:28px 28px 0 0; transform:translate(-50%,18px);}
body.succubus-home-page #header_search_panel.is-open{transform:translate(-50%,0);}
body.succubus-home-page #header_search_panel .header_search_panel__inner{padding:18px 18px 26px;}
body.search-panel-open #header{z-index:92;}
body.succubus-night #header_search_panel{--search-bg:rgba(27,18,28,.68); --search-close-bg:#211620; --search-ink:#fff5ef; --search-muted:#d1aab9; --search-line:rgba(255,245,239,.24); --search-glow:rgba(196,77,132,.3); --search-ring:rgba(255,245,239,.08); background:radial-gradient(circle at 50% -18%,rgba(116,50,96,.44) 0%,transparent 43%),radial-gradient(circle at 86% 24%,rgba(165,78,105,.18),transparent 31%),repeating-linear-gradient(135deg,rgba(255,245,239,.022) 0 1px,transparent 1px 21px),var(--search-bg); box-shadow:0 -18px 46px rgba(5,2,8,.28);}
body.succubus-night #header_search_panel::after{opacity:.58;}
body.succubus-night .header_search_panel__mascot::before{background:rgba(27,13,31,.22); backdrop-filter:blur(16px) saturate(1.12); -webkit-backdrop-filter:blur(16px) saturate(1.12);}
body.succubus-night #header_search_panel .header_search_panel__slot .search{background:rgba(255,255,255,.07); box-shadow:0 9px 25px rgba(5,2,8,.22);}
body.succubus-night #header_search_panel .header_search_panel__slot .search a.btn{filter:none;}

/* On the product-detail page SEARCH YOUR SIDE is a modal and must own the
   complete visible stack, including the fixed purchase bar and functional
   dock.  Keep the existing lower z-index on homepage/category/search pages.
   The explicit viewport edges are required because the shared sheet's
   mascot-stage clearance otherwise leaves its lower half under the purchase
   bar and the permanent dock. */
html body.product-detail-page.search-panel-open #header_search_panel,
html body:has(#contents .shopdetail.product-detail-page).search-panel-open #header_search_panel,
html.search-panel-open body:has(#contents .shopdetail.product-detail-page) #header_search_panel {
    z-index: 1301 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
}

/* The fixed four-item dock must remain visible while SEARCH YOUR SIDE is
   open. Keep the search sheet below the dock and reserve its height so the
   last category row is still scrollable instead of being covered. */
#header_search_panel {
    z-index: 120 !important;
    padding-bottom: calc(var(--store-functional-dock-height, 96px) + 16px);
}

/* DAY/NIGHT never changes the search palette.  Keep the utility sheet light;
   only the mascot artwork can change. */
html.succubus-preload-night #header_search_panel,
html.succubus-night #header_search_panel,
body.succubus-night #header_search_panel {
    --search-bg: #fff;
    background: #fff !important;
    background-image: none !important;
}

html.succubus-preload-night #header_search_panel::before,
html.succubus-night #header_search_panel::before,
body.succubus-night #header_search_panel::before {
    display: none !important;
}

body.succubus-night.succubus-home-page #header_search_panel::after,
html.succubus-night.succubus-home-page #header_search_panel::after {
    background: #fff !important;
    border-top-color: rgba(0, 0, 0, .16) !important;
}
/* Keep the search mascot and the home search sheet visually continuous.
   The mascot artwork intentionally extends 56px below its fixed stage;
   bridge that exact clearance with the same panel surface so no white seam
   or floating artwork appears between the image and the input panel. */
body.succubus-home-page #header_search_panel::after{
    content:"";
    display:block;
    position:absolute;
    z-index:0;
    top:-56px;
    right:0;
    left:0;
    height:56px;
    background:var(--search-bg);
    border-top:1px solid var(--search-line);
    pointer-events:none;
    opacity:1;
}
body.succubus-night.succubus-home-page #header_search_panel::after{
    opacity:1;
}
/* The home search sheet should feel tucked behind the visible foreground
   figure: let the mascot stage sit above the sheet so its arm/chest edge
   overlaps the rounded panel instead of the panel cutting across it. */
body.succubus-home-page #header_search_panel {
    z-index: 1000 !important;
}
body.succubus-home-page .header_search_panel__mascot {
    z-index: 1001 !important;
}
/* Keep the home search sheet and mascot in one ordered visual stack. The
   sheet owns the seam and must sit above the artwork/hero at its exact top
   edge, while the mascot remains above the page behind it. */
body.succubus-home-page #header_search_panel{
    z-index:1000;
    isolation:isolate;
}
body.succubus-home-page .header_search_panel__mascot{
    z-index:999;
}
/* 详情/非首页页面：搜索层先独立覆盖页面内容；末尾统一规则再让它与首页共用 mascot stage。 */
body:not(.succubus-home-page) #header{
    z-index:1002;
}
body:not(.succubus-home-page) #header_search_panel{
    top:var(--store-header-height,70px);
    height:calc(100vh - var(--store-header-height,70px));
    max-height:calc(100vh - var(--store-header-height,70px));
    z-index:1001;
    border-radius:0;
    border-bottom:0;
    background:#fff8f3;
    background-image:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
}
body:not(.succubus-home-page) #header_search_panel .header_search_panel__slot .search{
    background:#fffdfb;
}
body.succubus-night:not(.succubus-home-page) #header_search_panel{
    --search-bg:#211620;
    background:#211620;
    background-image:none;
    box-shadow:0 0 0 1px rgba(255,245,239,.08),0 18px 46px rgba(5,2,8,.38);
}
body.succubus-night:not(.succubus-home-page) #header_search_panel .header_search_panel__slot .search{
    background:#2b1e2b;
}
body:not(.succubus-home-page) .header_search_panel__mascot{
    display:none !important;
}
@supports (height:100dvh){
    body:not(.succubus-home-page) #header_search_panel{
        height:calc(100dvh - var(--store-header-height,70px));
        max-height:calc(100dvh - var(--store-header-height,70px));
    }
}
/* 搜索打开后保留主图的轮廓，用半透明毛玻璃压低对比度；吉祥物直接压住面板上沿。 */
body.search-panel-open.succubus-home-page #sec1[data-home-hero-schedule],
body.search-panel-open.succubus-home-page #sec1[data-home-hero-schedule] .sec_inner{
    --hero-bg:rgba(255,248,243,.28);
    background:rgba(255,248,243,.28);
    -webkit-backdrop-filter:blur(16px) saturate(1.06);
    backdrop-filter:blur(16px) saturate(1.06);
}
body.search-panel-open.succubus-home-page #sec1[data-home-hero-schedule] .sec_inner>div.sec1_1 .thumb a img{opacity:.34;transition:opacity .25s ease;}
body.search-panel-open.succubus-home-page #sec1[data-home-hero-schedule] .sec_inner::after{opacity:.22;transition:opacity .25s ease;}
body.search-panel-open.succubus-home-page #sec1[data-home-hero-schedule] .home-hero-copy,
body.search-panel-open.succubus-home-page #sec1[data-home-hero-schedule] .home-hero-meta,
body.search-panel-open.succubus-home-page #sec1[data-home-hero-schedule] .home-hero-lower-ui{opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s;}
body.search-panel-open.succubus-night.succubus-home-page #sec1[data-home-hero-schedule],
body.search-panel-open.succubus-night.succubus-home-page #sec1[data-home-hero-schedule] .sec_inner{
    --hero-bg:rgba(27,18,28,.3);
    background:rgba(27,18,28,.3);
}


/* 어사이드 */
aside{--menu-bg:#fff; --menu-ink:#111; --menu-muted:#777; --menu-line:rgba(17,17,17,.16); width: 100%; min-width: 320px; max-width: 850px; background-color: var(--menu-bg); position: fixed; left: -100%; top: var(--store-header-height,70px); height: calc(100% - var(--store-header-height,70px)); overflow-y: auto; transition: left .35s ease, opacity .25s ease, background-color .35s ease, color .35s ease; z-index:91; opacity: 0; color:var(--menu-ink);}
html.succubus-day aside,
body.succubus-day aside{--menu-bg:#fff; --menu-ink:#111; --menu-muted:#777; --menu-line:rgba(17,17,17,.16);}
html.succubus-night aside,
body.succubus-night aside{--menu-bg:#000; --menu-ink:#fff; --menu-muted:#aaa; --menu-line:rgba(255,255,255,.18);}
aside.show1{left: 0;}
aside.show2{opacity: 1;}
aside .asi_inner{padding: 24px 9% 7%; position: relative; color: var(--menu-ink); width: 100%; min-height: 100%;}
aside .asi_inner a,
aside .asi_inner .main_m__trigger,
aside .asi_inner .main_m__label{color: var(--menu-ink);}
aside .asi_inner .as_top{padding-top: 0; margin-bottom: 32px;}
aside .asi_inner .as_top .user_m{width: 100%; margin-bottom: 20px;}
aside .asi_inner .as_top .user_m__theme-row{display:flex; align-items:center; justify-content:space-between; min-height:44px; margin:0 0 22px; padding:0 0 16px; border-bottom:1px solid var(--menu-line); color:var(--menu-ink);}
aside .asi_inner .as_top .user_m__theme-label{color:var(--menu-muted); font:600 11px/1.3 'Jost',sans-serif; letter-spacing:.2em;}
aside .asi_inner .as_top .user_m__eyebrow{margin:0 0 12px; color:var(--menu-muted); font:600 10px/1.4 'Jost', sans-serif; letter-spacing:.2em;}
aside .asi_inner .as_top .user_m__account-actions{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:100%; margin-bottom:18px;}
aside .asi_inner .as_top .user_m__account-actions a{display:flex; align-items:center; justify-content:center; min-height:44px; padding:0 12px; border:1px solid var(--menu-line); border-radius:2px; color:var(--menu-ink); font:600 11px/1.3 'Jost', sans-serif; letter-spacing:.12em; text-align:center; text-decoration:none; transition:background-color .25s ease,border-color .25s ease,color .25s ease;}
aside .asi_inner .as_top .user_m__account-actions a:first-child{background:rgba(17,17,17,.06); border-color:rgba(17,17,17,.32);}
aside .asi_inner .as_top .user_m__account-actions a:hover,
aside .asi_inner .as_top .user_m__account-actions a:focus-visible{background:rgba(17,17,17,.12); border-color:var(--menu-ink); color:var(--menu-ink); outline:none;}
html.succubus-night aside .asi_inner .as_top .user_m__account-actions a:first-child{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.36);}
html.succubus-night aside .asi_inner .as_top .user_m__account-actions a:hover,
html.succubus-night aside .asi_inner .as_top .user_m__account-actions a:focus-visible{background:rgba(255,255,255,.14); border-color:#fff; color:#fff;}


aside .asi_inner .as_bottom{}
aside .asi_inner .as_bottom nav{width: 100%;padding-bottom:40px}
aside .asi_inner .as_bottom .menu_category_label{margin:0 0 17px; color:var(--menu-muted); font:600 11px/1.3 'Jost',sans-serif; letter-spacing:.2em;}
aside .asi_inner .as_bottom nav ul.main_m{width: 100%;}
aside .asi_inner .as_bottom nav ul.main_m>li{}
aside .asi_inner .as_bottom nav ul.main_m>li>.main_m__trigger,
aside .asi_inner .as_bottom nav ul.main_m>li>.main_m__label{display: block; width: 100%; padding: 13px 0px; position: relative; box-sizing: border-box; font-size: 15px; font-family: 'Noto Sans KR', sans-serif; font-weight:400; text-align: left;}
aside .asi_inner .as_bottom nav ul.main_m>li>.main_m__trigger{border: 0; border-radius: 0; background: transparent; color: inherit; cursor: pointer; appearance: none; -webkit-appearance: none;}
aside .asi_inner .as_bottom nav ul.main_m>li>.main_m__trigger span{position: relative; width: 14px; height: 14px; float: right; display: inline-block; z-index:100}
aside .asi_inner .as_bottom nav ul.main_m>li>.main_m__trigger span::before{background-color: var(--menu-muted); width: 1px; height: 14px; position: absolute; top: 0%; left: 50%; transform: translateX(-50%); content: ""; display: block; transform-origin: center; z-index: 11; transition: all .4s;}
aside .asi_inner .as_bottom nav ul.main_m>li>.main_m__trigger span::after{background-color: var(--menu-muted); width: 14px; height: 1px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); content: ""; display: block; transform-origin: center center; transform-origin: center}
aside .asi_inner .as_bottom nav ul.main_m>li>.main_m__trigger.clicked>span::before{transform: rotate(90deg);}
aside .asi_inner .as_bottom nav ul.sub_m{display: none; width: 100%; display: none; opacity: 0; transition: opacity .6s;border-top: 1px solid var(--menu-line); border-bottom: 1px solid var(--menu-line); }
aside .asi_inner .as_bottom nav ul.sub_m.show{opacity: 1;  }
aside .asi_inner .as_bottom nav ul.sub_m.border{}
aside .asi_inner .as_bottom nav ul.sub_m>li{width: 50%; float: left;}
aside .asi_inner .as_bottom nav ul.sub_m>li:first-child,aside .asi_inner .as_bottom nav ul.sub_m>li:nth-child(2){padding-top:5%}
aside .asi_inner .as_bottom nav ul.sub_m>li:last-child{margin-bottom:20px}
aside .asi_inner .as_bottom nav ul.sub_m>li:nth-child(odd){padding-left:3%}
aside .asi_inner .as_bottom nav ul.sub_m>li>a{line-height: 3; font-size: 14px; color: var(--menu-muted); transition: color .4s; font-family: 'Noto Sans KR', sans-serif;font-weight:400}
aside .asi_inner .as_bottom nav ul.sub_m>li:hover>a,aside .asi_inner .as_bottom nav ul.sub_m>li>a:active{color: var(--menu-ink);}
/* The old floating top/bottom jump widget is disabled on every page. */
html .fix_move,
body .fix_move{display:none!important; visibility:hidden!important; pointer-events:none!important;}

/* Keep the hamburger trigger visible above the menu sheet and turn it into the
   close control in the same left-hand position. */
html.succubus-menu-open #header,
body.succubus-menu-open #header{z-index:102;}
html.succubus-menu-open #header .head_actions,
body.succubus-menu-open #header .head_actions{visibility:hidden; pointer-events:none;}

/* Keep the full-screen menu itself touch-scrollable on mobile. The page is
   intentionally left in place while the fixed sheet owns vertical gestures;
   this also keeps expanded CATEGORY submenus reachable on iOS/WebKit. */
html.succubus-menu-open,
body.succubus-menu-open{overscroll-behavior:none;}
html.succubus-menu-open #site-account-menu,
body.succubus-menu-open #site-account-menu{
    height:calc(100dvh - var(--store-header-height,70px));
    max-height:calc(100dvh - var(--store-header-height,70px));
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y;
}
html.succubus-menu-open #site-account-menu .asi_inner,
body.succubus-menu-open #site-account-menu .asi_inner{
    min-height:100%;
    padding-bottom:max(7%, env(safe-area-inset-bottom));
}


/* 다찾다 자동완성*/
.search-auto-complete-list { display:none; z-index:1; position:absolute; top:43px; left:0; width:100%; line-height:14px; background:#fff; box-shadow:0px 0px 5px 0px rgb(0 0 0 / 20%); }
.search-auto-complete-list ul { width:100%; padding:8px 5px 10px 5px; border-bottom:1px solid #ddd; display: flex; flex-wrap: wrap;}
.search-auto-complete-list ul li { text-align:center; margin: 3px; }
.search-auto-complete-list ul li a { display:block; padding:8px 14px; color:#000; border: 1px solid #eee; border-radius: 10px; background:none; font-family:'malgun gothic'; font-size:11px; letter-spacing:-1px; } 
.search-auto-complete-list ul li a strong { color:#ab3e41; }
.search-auto-complete-list ul li a:hover { background:#f2f2f2; }
.search-auto-complete-list ul li a:hover span {}
.search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#666; font-size:11px; }


/* 다찾다 검색 파인더 - 레이어 */
#allfinder-ctr { z-index: 100; position: fixed; right:0; bottom:50%; }
#allfinder-ctr a { display:block; width:77px; height:64px; background:url('/images/common/allfinder_ctrl_mo.png') no-repeat 0 0; background-size:100% 100%; border:none; outline:none; font-size:0; }

.all-finder-layer { z-index:200; position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; overflow-y:auto; }
.all-finder-layer .finder-hd { z-index:1; position:fixed; top:0; left:0; width:100%; height:60px; border-bottom:1px solid #e7e7e7; background:#fff; }
.all-finder-layer .finder-hd .fa-close { position:absolute; top:17px; right:10px; font-size:26px; color:#000; }
.all-finder-layer .finder-hd .finder-tit { height:60px; line-height:60px; padding:0 10px; font-size:16px; font-weight:bold; color:#000; letter-spacing:-2px; }
.all-finder-layer .finder-search { position:relative; margin:0 10px 20px; border:2px solid #000; border-radius:3px; }
.all-finder-layer .finder-search .fa-search { display: inline-block; width: 40px; height: 42px; line-height: 42px; text-align: center; font-size: 18px; }
.all-finder-layer .finder-search .txt-input { width:85%; height:42px; line-height:42px; margin:0; padding:0; font-size:14px; outline:none; border:none; color: #000; vertical-align:top; letter-spacing:-1px; }
.all-finder-layer .finder-search .txt-input::-webkit-input-placeholder { color:#b1b1b1; }
.all-finder-layer .finder-search dd { background:#FFF; }
.all-finder-layer .finder-opt { padding:60px 0 55px; color:#000; }
.all-finder-layer .finder-opt dl dt { position:relative; height:53px; line-height:53px; padding:0 10px; border-top:1px solid #e7e7e7; font-size:14px; font-weight:bold; color:#000; letter-spacing:-1px; }
.all-finder-layer .finder-opt dl dt .fa { position:absolute; top:50%; right:10px; margin-top:-13px; font-size:25px; color:#b2b2b2; }
.all-finder-layer .finder-opt dl dt > .finder-tooltip-btn { display:inline-block; width:20px; height:20px; line-height:20px; margin-top:0; border:1px solid #cecece; border-radius:20px; color:#666; font-size:11px; background:#fff; text-align:center; outline:none; }
.all-finder-layer .finder-opt dl dt .finder-comm-layer { display:none; position:absolute; top:43px; left:10px; width:70%; padding:0 15px 11px; border:1px solid #000; background:#fff; text-align:left; font-weight:normal; color:#000; z-index:1 }
.all-finder-layer .finder-opt dl dt .finder-comm-layer .finder-btn-close { display:inline-block; position:absolute; top:10px; right:14px; margin:0; font-size:19px; color:#000; outline:none; }
.all-finder-layer .finder-opt dl dt .finder-comm-layer .finder-layer-tit { padding:13px 0; border-bottom:1px solid #e5e5e5; font-size:14px; font-weight:bold; line-height:14px; }
.all-finder-layer .finder-opt dl dt .finder-comm-layer .finder-layer-cnt { padding-top:13px; line-height:1.5; font-size:13px; }
.all-finder-layer .finder-opt dl dd { display:none; padding:10px 5px 0; border-top:1px solid #e7e7e7; background:#f4f4f4; font-size:0; }
.all-finder-layer .finder-opt dl dd label { display:inline-block; width:33.3333%; text-align:center; line-height:18px;}
.all-finder-layer .finder-opt .finder-color label { width:12.5%; }
.all-finder-layer .finder-opt .finder-price .finder-price-input { padding:0 5px 10px; text-align:right; font-size:12px; }
.all-finder-layer .finder-opt .finder-price .finder-price-input:after { clear: both; content: ""; display: block; }
.all-finder-layer .finder-opt .finder-price .finder-price-input span { float:left; display:inline-block; height:34px; line-height:34px; }
.all-finder-layer .finder-opt .finder-price .finder-price-input label { display: inline-block; width: 33%; padding: 0 8px; border: 1px solid #ccc; border-radius:3px; color: #666; background:#fff; }
.all-finder-layer .finder-opt .finder-price .finder-price-input label .txt-input { display: inline-block; width: 84%; height: 32px; line-height: 32px; padding: 0; border: none; background: none; color: #000; outline:none; text-align:right; }
.all-finder-layer .finder-opt .finder-child-category { padding:0; }
.all-finder-layer .finder-opt .finder-child-category .mobile-select-category { padding:15px; margin-bottom:9px; border-bottom:1px solid #e7e7e7; font-size:14px; font-weight:bold; color:#9a9a9a; background:#fff; word-break:break-all; letter-spacing:-1px; }
.all-finder-layer .finder-opt .finder-child-category .mobile-select-category .pd-2px { padding:0 2px; }
.all-finder-layer .finder-opt .finder-child-category .mobile-select-category .fc-black { color:#000; }
.all-finder-layer .finder-opt .finder-child-category .mobile-select-category .fa { margin-left:2px; color:#000; }
.all-finder-layer .finder-btn-c { z-index:1; position:fixed; bottom:0; left:0; width:100%; height:55px; text-align: center; font-size:0; }
.all-finder-layer .finder-btn-c a.reset { display: inline-block; width: 30%; height: 55px; line-height: 55px; background: #999; color: #fff; font-size: 16px; font-weight: bold; letter-spacing: 1px; border:none; }
.all-finder-layer .finder-btn-c button { display: inline-block; width: 70%; height: 55px; line-height: 55px; background: #000; color: #fff; font-size: 16px; font-weight: bold; letter-spacing: -0.5px; border:none; }
.all-finder-layer .finder-btn-c button span.fa-search { margin-right:5px; margin-top:-2px; vertical-align:middle; font-size:0.750em; }
.all-finder-layer .finder-btn-c button span.finder-count { display:inline-block; color:#ffd800; font-size:18px; vertical-align:middle; }

.all-finder-layer .finder-opt .finder-options { display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:80%; height:22px; padding: 5px 5%; line-height:22px; border: 1px solid #ccc; word-break:break-all; border-radius: 20px; background:#fff; color:#000; text-align:center; font-size:12px; }
.all-finder-layer .finder-opt .finder-options.on { font-weight: bold; border: 1px solid #000; box-shadow:2px 2px 3px #d2d2d2; }
.all-finder-layer .finder-opt .finder-option-color em { display: inline-block; width: 33px; height: 33px; border-radius:20px; font-size:0; vertical-align:middle; }
.all-finder-layer .finder-opt .finder-option-color.color-picker { width:33px; height:33px; padding: 0; border: none; } 
.all-finder-layer .finder-opt .finder-option-color.color-picker .fa-check { display:none; width:33px; height:33px; margin-top:-25px; color:#fff; text-align:center; font-size:16px; }
.all-finder-layer .finder-opt .finder-option-color.color-picker.on .fa-check { display:block; }
.all-finder-layer .finder-opt .finder-option-color.color-picker.on.finder-option-color-white .fa-check { color:#000; }

.finder-option-color.finder-option-color-black em { background-color: #000; }
.finder-option-color.finder-option-color-white em { background-color: #FFF; width: 20px; height: 20px; border: 1px solid #e5e5e5; }
.finder-option-color.finder-option-color-gray em { background-color: #808080; }
.finder-option-color.finder-option-color-beige em { background-color: #e5d0b2; }
.finder-option-color.finder-option-color-brown em { background-color: #aa6810; }
.finder-option-color.finder-option-color-navy em { background-color: #425583; }
.finder-option-color.finder-option-color-blue em { background-color: #0000ff; }
.finder-option-color.finder-option-color-light-blue em { background-color: #62acff; }
.finder-option-color.finder-option-color-red em { background-color: #ff0000; }
.finder-option-color.finder-option-color-orange em { background-color: #ffa500; }
.finder-option-color.finder-option-color-yellow em { background-color: #ffff00; }
.finder-option-color.finder-option-color-pink em { background-color: #ffc0cb; }
.finder-option-color.finder-option-color-purple em { background-color: #800080; }
.finder-option-color.finder-option-color-jaju em { background-color: #a63f7f; }
.finder-option-color.finder-option-color-khaki em { background-color: #2f5e2f; }
.finder-option-color.finder-option-color-green em { background-color: #008000; }
.finder-option-color.finder-option-color-light-green em { background-color: #72dd95; }
.finder-option-color.finder-option-color-silver em { background-color: #dfdfdf; }
.finder-option-color.finder-option-color-gold em { background-color: #cfbc4e; }
.finder-option-color.finder-option-color-apricot em { background-color: #fbceb1;  }

.all-finder-layer .search-auto-complete-list { display:none; z-index:1; position:absolute; top:43px; left:0; width:100%; line-height:14px; background:#fff; box-shadow:0px 0px 5px 0px rgb(0 0 0 / 20%); }
.all-finder-layer .search-auto-complete-list ul { width:100%; padding:8px 5px 10px 5px; border-bottom:1px solid #ddd; display: flex; flex-wrap: wrap;}
.all-finder-layer .search-auto-complete-list ul li { text-align:center; margin: 3px; }
.all-finder-layer .search-auto-complete-list ul li a { display:block; padding:8px 14px; color:#000; border: 1px solid #eee; border-radius: 10px; background:none; font-family:'malgun gothic'; font-size:11px; letter-spacing:-1px; } 
.all-finder-layer .search-auto-complete-list ul li a strong { color:#ab3e41; }
.all-finder-layer .search-auto-complete-list ul li a:hover { background:#f2f2f2; }
.all-finder-layer .search-auto-complete-list ul li a:hover span {}
.all-finder-layer .search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#666; font-size:11px; }

/*
 * Global monochrome theme contract.
 *
 * Every page receives this Top pane.  The theme therefore owns the base
 * colors for the document, header, search layer, menu and finder.  The UI is
 * permanently the DAY/light presentation; DAY/NIGHT only selects artwork
 * and the shape of the toggle itself.  No page-wide dark palette is allowed.
 */
:root,
html.succubus-preload-day,
html.succubus-day,
html.succubus-theme-day,
body.succubus-day {
    --succubus-page-bg: #fff;
    --succubus-surface: #fff;
    --succubus-surface-muted: #f5f5f5;
    --succubus-ink: #000;
    --succubus-muted: #666;
    --succubus-line: rgba(0, 0, 0, .16);
    --succubus-soft-line: rgba(0, 0, 0, .08);
    --succubus-active-bg: #000;
    --succubus-active-ink: #fff;
    color-scheme: light;
}

html.succubus-preload-night,
html.succubus-night,
html.succubus-theme-night,
body.succubus-night {
    /* Retired compatibility markers are deliberately light.  Older cached
     * fragments may still write one of these names before the shared script
     * removes it; it must never produce a black first paint. */
    --succubus-page-bg: #fff;
    --succubus-surface: #fff;
    --succubus-surface-muted: #f5f5f5;
    --succubus-ink: #000;
    --succubus-muted: #666;
    --succubus-line: rgba(0, 0, 0, .16);
    --succubus-soft-line: rgba(0, 0, 0, .08);
    --succubus-active-bg: #000;
    --succubus-active-ink: #fff;
    color-scheme: light;
}

html,
body {
    background-color: var(--succubus-page-bg, #fff) !important;
    color: var(--succubus-ink, #000) !important;
}

body #container,
body #contents {
    background-color: var(--succubus-page-bg, #fff) !important;
    color: var(--succubus-ink, #000) !important;
}

#header,
.preview-shell .preview-header {
    --header-ink: #000;
    background: #fff !important;
    background-image: none !important;
    border-bottom: 1px solid var(--succubus-line) !important;
    box-shadow: none !important;
    color: #000 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html.succubus-preload-night #header,
html.succubus-night #header,
body.succubus-night #header,
#header.header-night,
#header.is-night,
html.succubus-preload-night .preview-shell .preview-header,
html.succubus-night .preview-shell .preview-header,
body.succubus-night .preview-shell .preview-header,
.preview-shell .preview-header.is-night {
    --header-ink: #000;
    background: #fff !important;
    background-image: none !important;
    border-bottom-color: var(--succubus-line) !important;
    color: #000 !important;
}

#header .head_inner h1.logo .logo__wordmark,
#header .head_inner h1.logo a,
#header .head_inner .ham a,
#header .head_actions .head_action,
.preview-shell .preview-header,
.preview-shell .preview-header__brand,
.preview-shell .preview-header__action {
    color: inherit !important;
}

#header .head_inner h1.logo .logo__avatar,
#header .header_icon--search,
.preview-shell .preview-search-asset--header {
    filter: none !important;
}

/* The remote raster search icon is not recolored by theme inversion. Draw a
 * small vector-style control from currentColor for both palettes instead. */
#header .head_actions .header_search_trigger {
    position: relative;
}

#header .head_actions .header_search_trigger .header_icon--search {
    display: none !important;
}

#header .head_actions .header_search_trigger::before {
    width: 15px;
    height: 15px;
    content: "";
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

#header .head_actions .header_search_trigger::after {
    position: absolute;
    right: 4px;
    bottom: 5px;
    width: 7px;
    height: 1.5px;
    content: "";
    background: currentColor;
    transform: rotate(45deg);
    transform-origin: right center;
}

#header_search_panel {
    --search-bg: #fff;
    --search-ink: #000;
    --search-muted: #666;
    --search-line: rgba(0, 0, 0, .16);
    --search-glow: transparent;
    --search-ring: transparent;
    --search-close-bg: #fff;
    background: #fff !important;
    background-image: none !important;
    border-color: var(--search-line) !important;
    box-shadow: 0 18px 30px rgba(0, 0, 0, .12) !important;
    color: #000 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html.succubus-preload-night #header_search_panel,
html.succubus-night #header_search_panel,
body.succubus-night #header_search_panel {
    --search-bg: #fff;
    --search-ink: #000;
    --search-muted: #666;
    --search-line: rgba(0, 0, 0, .16);
    --search-close-bg: #fff;
    background: #fff !important;
    background-image: none !important;
    box-shadow: 0 18px 30px rgba(0, 0, 0, .12) !important;
    color: #000 !important;
}

#header_search_panel::before {
    border-color: var(--search-line) !important;
    box-shadow: none !important;
}

#header_search_panel::after {
    color: var(--search-muted) !important;
}

#header_search_panel .header_search_panel__slot .search,
#header_search_panel .header_search_panel__discovery-grid a {
    background: var(--search-bg) !important;
    border-color: var(--search-line) !important;
    box-shadow: none !important;
    color: var(--search-ink) !important;
}

#header_search_panel .header_search_panel__slot .search a.btn {
    background: transparent !important;
    filter: none !important;
}

#header_search_panel .header_search_panel__slot .search a.btn::before {
    position: absolute;
    top: 13px;
    left: 15px;
    width: 14px;
    height: 14px;
    content: "";
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

#header_search_panel .header_search_panel__slot .search a.btn::after {
    position: absolute;
    top: 27px;
    left: 28px;
    width: 7px;
    height: 1.5px;
    content: "";
    background: currentColor;
    transform: rotate(45deg);
    transform-origin: left center;
}

#header_search_panel .header_search_panel__discovery-grid a:hover,
#header_search_panel .header_search_panel__discovery-grid a:focus-visible {
    background: var(--succubus-surface-muted) !important;
}

.header_search_panel__mascot::before {
    background: rgba(255, 255, 255, .72) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
}

html.succubus-preload-night .header_search_panel__mascot::before,
html.succubus-night .header_search_panel__mascot::before,
body.succubus-night .header_search_panel__mascot::before {
    background: rgba(0, 0, 0, .72) !important;
}

aside,
aside .asi_inner,
aside .asi_inner .as_top,
aside .asi_inner .as_bottom,
aside .asi_inner .as_bottom nav ul.sub_m {
    background: var(--succubus-page-bg, #fff) !important;
    background-image: none !important;
    border-color: var(--succubus-line) !important;
    color: var(--succubus-ink, #000) !important;
}

aside .asi_inner a,
aside .asi_inner .main_m__trigger,
aside .asi_inner .main_m__label,
aside .asi_inner .menu_category_label,
aside .asi_inner .as_top .user_m__theme-label,
aside .asi_inner .as_top .user_m__eyebrow,
aside .asi_inner .as_bottom nav ul.sub_m > li > a {
    color: var(--succubus-ink, #000) !important;
}

aside .asi_inner .as_top .user_m__theme-label,
aside .asi_inner .as_top .user_m__eyebrow,
aside .asi_inner .menu_category_label,
aside .asi_inner .as_bottom nav ul.sub_m > li > a {
    color: var(--succubus-muted, #666) !important;
}

aside .asi_inner .as_top .user_m__account-actions a {
    background: var(--succubus-surface) !important;
    border-color: var(--succubus-line) !important;
    color: var(--succubus-ink) !important;
}

aside .asi_inner .as_top .user_m__account-actions a:first-child {
    background: var(--succubus-active-bg) !important;
    border-color: var(--succubus-active-bg) !important;
    color: var(--succubus-active-ink) !important;
}

/* Account access uses the supplied wide Q-version artwork as the button
 * surface. Keep the real Makeshop links, but remove the old square text-card
 * skin around them. */
aside .asi_inner .as_top .user_m__account-actions a.user_m__account-action {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    line-height: 0 !important;
}

aside .asi_inner .as_top .user_m__account-actions a.user_m__account-action img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

.all-finder-layer,
.all-finder-layer .finder-hd,
.all-finder-layer .finder-opt dl dt .finder-comm-layer,
.all-finder-layer .finder-opt .finder-child-category .mobile-select-category,
.all-finder-layer .finder-search dd {
    background: var(--succubus-page-bg, #fff) !important;
    background-image: none !important;
    border-color: var(--succubus-line) !important;
    color: var(--succubus-ink, #000) !important;
}

.all-finder-layer .finder-hd .fa-close,
.all-finder-layer .finder-hd .finder-tit,
.all-finder-layer .finder-opt,
.all-finder-layer .finder-opt dl dt,
.all-finder-layer .finder-opt dl dt .finder-comm-layer,
.all-finder-layer .finder-opt .finder-child-category .mobile-select-category .fc-black,
.all-finder-layer .finder-opt .finder-child-category .mobile-select-category .fa,
.all-finder-layer .finder-search .txt-input,
.all-finder-layer .finder-opt .finder-price .finder-price-input label .txt-input {
    color: var(--succubus-ink, #000) !important;
}

.all-finder-layer .finder-opt dl dd {
    background: var(--succubus-surface-muted, #f5f5f5) !important;
    border-color: var(--succubus-line) !important;
}

.all-finder-layer .finder-search,
.all-finder-layer .finder-opt .finder-options,
.all-finder-layer .finder-opt .finder-price .finder-price-input label {
    background: var(--succubus-surface, #fff) !important;
    border-color: var(--succubus-line) !important;
    color: var(--succubus-ink, #000) !important;
}

.all-finder-layer .finder-btn-c a.reset,
.all-finder-layer .finder-btn-c button {
    background: var(--succubus-active-bg, #000) !important;
    color: var(--succubus-active-ink, #fff) !important;
}

html.succubus-preload-night .all-finder-layer .finder-btn-c a.reset,
html.succubus-night .all-finder-layer .finder-btn-c a.reset,
body.succubus-night .all-finder-layer .finder-btn-c a.reset {
    background: #fff !important;
    color: #000 !important;
}

/*
 * Unified search sheet geometry.
 *
 * Keep the mascot stage and artwork exactly where the supplied asset places
 * them. The artwork already carries its 56px lower extension, so the sheet
 * begins at the stage edge and the field follows that extension without a
 * second 56px drop. The title, field, quick categories, and note therefore
 * move together with the sheet instead of exposing a white edge beneath the
 * mascot.
 */
#header_search_panel,
body.succubus-home-page #header_search_panel,
body:not(.succubus-home-page) #header_search_panel,
html.succubus-preload-night #header_search_panel,
html.succubus-night #header_search_panel,
body.succubus-night #header_search_panel {
    --succubus-search-stage-height: 32vh;
    /* The mascot artwork already extends 56px below its stage. Starting the
       sheet at the stage edge makes the input's top land on that artwork edge
       instead of adding the same clearance a second time. */
    --succubus-search-design-drop: 0px;
    top: calc(var(--store-header-height, 70px) + var(--succubus-search-stage-height) + var(--succubus-search-design-drop));
    height: calc(100vh - var(--store-header-height, 70px) - var(--succubus-search-stage-height) - var(--succubus-search-design-drop));
    max-height: calc(100vh - var(--store-header-height, 70px) - var(--succubus-search-stage-height) - var(--succubus-search-design-drop));
    box-sizing: border-box;
    padding-top: 0;
    z-index: 1001;
    border-radius: 28px 28px 0 0;
    border-bottom: 0;
}

#header_search_panel::before {
    top: -89px;
}

#header_search_panel .header_search_panel__inner {
    /* The original inner padding remains unchanged. */
    box-sizing: border-box;
}

.header_search_panel__mascot {
    height: var(--succubus-search-stage-height, 32vh);
    z-index: 1003;
}

/* The same mascot stage and edge position are used on home, category, and
 * product-detail pages; do not hide the shared mascot outside the homepage. */
body:not(.succubus-home-page) .header_search_panel__mascot {
    display: block !important;
    top: var(--store-header-height, 70px);
    height: var(--succubus-search-stage-height, 32vh);
}

body.search-panel-open #header {
    z-index: 1004;
}

@supports (height: 100dvh) {
    #header_search_panel,
    body.succubus-home-page #header_search_panel,
    body:not(.succubus-home-page) #header_search_panel,
    html.succubus-preload-night #header_search_panel,
    html.succubus-night #header_search_panel,
    body.succubus-night #header_search_panel {
        height: calc(100dvh - var(--store-header-height, 70px) - var(--succubus-search-stage-height) - var(--succubus-search-design-drop));
        max-height: calc(100dvh - var(--store-header-height, 70px) - var(--succubus-search-stage-height) - var(--succubus-search-design-drop));
    }
}

/*
 * Header icon pack: use the supplied transparent artwork instead of the
 * platform search image, inline bag SVG, and CSS hamburger artwork. The menu
 * still changes to an X when it is open so the existing interaction remains.
 */
#header .header_icon--menu {
    width: 24px !important;
    height: 24px !important;
    border: 0 !important;
    background: transparent !important;
}

#header .header_icon--menu::before,
#header .header_icon--menu::after {
    display: none !important;
    content: none !important;
}

#header .header_icon--menu-image {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    object-fit: contain;
    filter: none !important;
    opacity: 1;
    visibility: visible;
}

#header .head_inner .ham a[aria-expanded="true"] .header_icon--menu-image {
    opacity: 0 !important;
    visibility: hidden !important;
}

#header .head_inner .ham a[aria-expanded="true"] .header_icon--menu::before,
#header .head_inner .ham a[aria-expanded="true"] .header_icon--menu::after {
    position: absolute;
    top: 50%;
    left: 2px;
    display: block !important;
    width: 20px;
    height: 1.5px;
    border: 0;
    background: currentColor !important;
    content: "" !important;
    opacity: 1 !important;
}

#header .head_inner .ham a[aria-expanded="true"] .header_icon--menu::before {
    transform: translateY(-50%) rotate(45deg) !important;
}

#header .head_inner .ham a[aria-expanded="true"] .header_icon--menu::after {
    transform: translateY(-50%) rotate(-45deg) !important;
}

/* The menu, close, and product-detail return controls use the supplied
 * transparent square artwork. State changes only swap the visible image;
 * the native anchor and its click handler remain unchanged. */
#header .header_icon--menu-image,
#header .header_icon--menu-close-image,
#header .header_icon--back-image {
    position: absolute;
    inset: 0;
    display: none !important;
    width: 24px !important;
    height: 24px !important;
    object-fit: contain;
    filter: none !important;
}
#header .head_inner .ham a:not([aria-expanded="true"]):not(.product-detail-header-back) .header_icon--menu-image,
#header .head_inner .ham a[aria-expanded="true"] .header_icon--menu-close-image,
#header .head_inner .ham a.product-detail-header-back .header_icon--back-image {
    display: block !important;
}
#header .head_inner .ham a.product-detail-header-back .header_icon--menu::before,
#header .head_inner .ham a.product-detail-header-back .header_icon--menu::after,
#header .head_inner .ham a[aria-expanded="true"] .header_icon--menu::before,
#header .head_inner .ham a[aria-expanded="true"] .header_icon--menu::after {
    display: none !important;
    content: none !important;
}
#header .header_icon--menu-close-image,
#header .header_icon--back-image,
#header .header_icon--menu-image {
    opacity: 1 !important;
    visibility: visible !important;
}

#header .head_actions .header_search_trigger::before,
#header .head_actions .header_search_trigger::after {
    display: none !important;
    content: none !important;
}

#header .head_actions .header_search_trigger .header_icon--search {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    object-fit: contain;
    filter: none !important;
}

#header .head_actions .header_icon--bag {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    object-fit: contain;
    filter: none !important;
}

/* Keep the supplied icon artwork intact in night mode. A soft exterior glow
 * keeps the black linework visible against the dark header. */
#header .header_icon--menu-image,
#header .header_icon--menu-close-image,
#header .header_icon--back-image {
    filter: drop-shadow(0 0 1px rgba(255,255,255,.18)) !important;
}
html.succubus-night #header .header_icon--menu-image,
html.succubus-night #header .header_icon--menu-close-image,
html.succubus-night #header .header_icon--back-image,
body.succubus-night #header .header_icon--menu-image,
body.succubus-night #header .header_icon--menu-close-image,
body.succubus-night #header .header_icon--back-image {
    filter: drop-shadow(0 0 3px rgba(255,255,255,.84)) drop-shadow(0 0 8px rgba(255,255,255,.28)) !important;
}

/* The theme control is now a transparent image button, not the old CSS pill. */
#header .header_theme_toggle__icons,
aside .header_theme_toggle__icons {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 44px;
    height: 40px;
}
#header .header_theme_toggle__image,
aside .header_theme_toggle__image {
    display: block !important;
    width: 21px !important;
    height: 21px !important;
    object-fit: contain;
    filter: none !important;
    opacity: .38;
    transition: opacity .25s ease, transform .25s ease, filter .25s ease;
}
#header .header_theme_toggle:not(.is-active) .header_theme_toggle__image--day,
aside .header_theme_toggle:not(.is-active) .header_theme_toggle__image--day,
#header .header_theme_toggle.is-active .header_theme_toggle__image--night,
aside .header_theme_toggle.is-active .header_theme_toggle__image--night {
    opacity: 1;
    transform: scale(1.08);
}
#header .header_theme_toggle__track,
aside .header_theme_toggle__track {
    display: none !important;
}
html.succubus-night .header_theme_toggle__image,
body.succubus-night .header_theme_toggle__image {
    filter: drop-shadow(0 0 3px rgba(255,255,255,.7)) drop-shadow(0 0 8px rgba(255,255,255,.25)) !important;
}

/* The menu's DAYNIGHT control keeps the supplied sun/moon artwork, but brings
 * back the slow sliding background from the original interaction. */
aside .header_theme_toggle__icons {
    position: relative;
    overflow: hidden;
    width: 54px !important;
    height: 34px !important;
    gap: 2px;
    padding: 4px !important;
    box-sizing: border-box;
    border: 1px solid rgba(48, 37, 38, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    isolation: isolate;
    transition: background-color .7s ease, border-color .7s ease,
        box-shadow .7s ease;
}
aside .header_theme_toggle__icons::before {
    content: "";
    position: absolute;
    z-index: 0 !important;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 26px;
    border-radius: 999px;
    background: rgba(238, 213, 220, .9);
    box-shadow: 0 2px 8px rgba(75, 39, 55, .16);
    transform: translateX(0);
    transition: transform .72s cubic-bezier(.22,.61,.36,1),
        background-color .7s ease;
}
aside .header_theme_toggle.is-active .header_theme_toggle__icons::before {
    transform: translateX(20px);
    background: rgba(88, 44, 80, .84);
}
aside .header_theme_toggle__image {
    position: relative;
    z-index: 1;
    width: 21px !important;
    height: 21px !important;
    transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1),
        filter .7s ease !important;
}

/* Slow the hamburger-to-X image crossfade and rotation without changing the
 * existing menu state or click timing. */
#header .header_icon--menu {
    position: relative;
}
#header .header_icon--menu-image,
#header .header_icon--menu-close-image,
#header .header_icon--back-image {
    display: block !important;
    visibility: visible !important;
    opacity: 0 !important;
    transform: rotate(-18deg) scale(.92);
    transition: opacity .72s ease, transform .72s cubic-bezier(.22,.61,.36,1) !important;
}
#header .head_inner .ham a:not([aria-expanded="true"]):not(.product-detail-header-back) .header_icon--menu-image,
#header .head_inner .ham a[aria-expanded="true"] .header_icon--menu-close-image,
#header .head_inner .ham a.product-detail-header-back .header_icon--back-image {
    opacity: 1 !important;
    transform: rotate(0deg) scale(1);
}

/* The sliding DAY/NIGHT pill must remain visible above its own background.
 * The previous negative stacking level put the moving layer behind the
 * control's background, so clicking the moon changed the source image but
 * left the background visually unchanged. */
aside .header_theme_toggle__icons::before {
    z-index: 0 !important;
}
aside .header_theme_toggle__icons .header_theme_toggle__image {
    z-index: 1 !important;
}

/*
 * Global night-resource fallback contract.
 *
 * A one-source UI asset can stay in use when its night counterpart is not
 * available. The fallback is deliberately opt-in: transparent UI artwork is
 * made readable with a soft logo-like halo, while product photos, homepage
 * marketing banners, and the paired search mascots are never swept into this
 * rule.
 */
html.succubus-preload-night img[data-succubus-night-fallback="glow"],
html.succubus-night img[data-succubus-night-fallback="glow"],
body.succubus-night img[data-succubus-night-fallback="glow"] {
    filter:
        drop-shadow(0 0 3px rgba(255, 255, 255, .78))
        drop-shadow(0 0 9px rgba(255, 255, 255, .28)) !important;
}

html.succubus-preload-night #header .head_inner h1.logo .logo__avatar,
html.succubus-night #header .head_inner h1.logo .logo__avatar,
body.succubus-night #header .head_inner h1.logo .logo__avatar {
    filter:
        drop-shadow(0 0 3px rgba(255, 255, 255, .78))
        drop-shadow(0 0 9px rgba(255, 255, 255, .28)) !important;
}

/* Final search-layer stacking contract: the permanent bottom dock stays
 * above the open search panel on every page, while the panel reserves the
 * dock's height for its own scrollable content. */
#header_search_panel {
    z-index: 120 !important;
    padding-bottom: calc(var(--store-functional-dock-height, 96px) + 16px) !important;
}

/* Do not let an old NIGHT marker recolor the search sheet. */
html.succubus-preload-night #header_search_panel,
html.succubus-night #header_search_panel,
body.succubus-night #header_search_panel {
    --search-bg: #fff !important;
    background: #fff !important;
    background-image: none !important;
}

html.succubus-preload-night #header_search_panel::before,
html.succubus-night #header_search_panel::before,
body.succubus-night #header_search_panel::before {
    display: none !important;
    content: none !important;
    box-shadow: none !important;
}

html.succubus-preload-night.succubus-home-page #header_search_panel::after,
html.succubus-night.succubus-home-page #header_search_panel::after,
body.succubus-night.succubus-home-page #header_search_panel::after {
    background: #fff !important;
    border-top-color: rgba(0, 0, 0, .16) !important;
}

/* 2026-09-15 image-only NIGHT contract for shared chrome.  NIGHT may swap
 * supplied artwork, but the menu, close state, and quick surfaces keep the
 * DAY palette; the homepage header is governed only by the final transparent
 * rule at the end of this file. */
html.succubus-preload-night aside,
html.succubus-night aside,
body.succubus-night aside {
    --menu-bg: #fff !important;
    --menu-ink: #111 !important;
    --menu-muted: #777 !important;
    --menu-line: rgba(17, 17, 17, .16) !important;
    background: #fff !important;
    background-color: #fff !important;
    color: #111 !important;
}

html.succubus-preload-night aside .asi_inner,
html.succubus-night aside .asi_inner,
body.succubus-night aside .asi_inner,
html.succubus-preload-night aside .asi_inner a,
html.succubus-night aside .asi_inner a,
body.succubus-night aside .asi_inner a,
html.succubus-preload-night aside .main_m__trigger,
html.succubus-night aside .main_m__trigger,
body.succubus-night aside .main_m__trigger,
html.succubus-preload-night aside .main_m__label,
html.succubus-night aside .main_m__label,
body.succubus-night aside .main_m__label {
    color: #111 !important;
}

html.succubus-preload-night aside .user_m__account-actions a,
html.succubus-night aside .user_m__account-actions a,
body.succubus-night aside .user_m__account-actions a {
    background: transparent !important;
    border-color: rgba(17, 17, 17, .16) !important;
    color: #111 !important;
}

html.succubus-preload-night aside .user_m__account-actions a:first-child,
html.succubus-night aside .user_m__account-actions a:first-child,
body.succubus-night aside .user_m__account-actions a:first-child {
    background: rgba(17, 17, 17, .06) !important;
    border-color: rgba(17, 17, 17, .32) !important;
}

html.succubus-preload-night #header .header_icon--menu-image,
html.succubus-night #header .header_icon--menu-image,
body.succubus-night #header .header_icon--menu-image,
html.succubus-preload-night #header .header_icon--menu-close-image,
html.succubus-night #header .header_icon--menu-close-image,
body.succubus-night #header .header_icon--menu-close-image,
html.succubus-preload-night #header .header_icon--back-image,
html.succubus-night #header .header_icon--back-image,
body.succubus-night #header .header_icon--back-image,
html.succubus-preload-night #header .header_icon--search,
html.succubus-night #header .header_icon--search,
body.succubus-night #header .header_icon--search,
html.succubus-preload-night #header .header_icon--bag,
html.succubus-night #header .header_icon--bag,
body.succubus-night #header .header_icon--bag,
html.succubus-preload-night #header .logo__avatar,
html.succubus-night #header .logo__avatar,
body.succubus-night #header .logo__avatar,
html.succubus-preload-night #header .header_theme_toggle__image,
html.succubus-night #header .header_theme_toggle__image,
body.succubus-night #header .header_theme_toggle__image,
html.succubus-preload-night aside [data-succubus-tool-action-image],
html.succubus-night aside [data-succubus-tool-action-image],
body.succubus-night aside [data-succubus-tool-action-image] {
    filter: none !important;
}

/* -------------------------------------------------------------------------
   Shared Account UI for Makeshop's default utility pages

   Account Quick Menu links such as 주문내역, 최근 본 상품, 쿠폰, 회원정보,
   적립금/포인트/예치금, 출석체크, 주소록, 이메일 문의, 선물함, 내게시글,
   이용약관 and 회원탈퇴 can resolve to separate native Makeshop templates.
   They receive this scoped skin through the early page marker in the header
   template.  The rules intentionally keep native form names, submit targets,
   virtual tags, tables and AJAX hooks intact while replacing the default
   visual language with the Account page's white canvas, 16px cards and type
   rhythm.  NIGHT is not a second UI here; it uses the same presentation.
   ------------------------------------------------------------------------- */

html.succubus-account-default-page {
    --account-page-bg: #fff;
    --account-surface: #f5f5f5;
    --account-card: #fff;
    --account-ink: #111;
    --account-muted: #777;
    --account-soft: #b7b7b7;
    --account-line: rgba(17, 17, 17, .14);
    --account-line-soft: rgba(17, 17, 17, .1);
    --account-accent: #111;
    --account-accent-ink: #fff;
}

html.succubus-account-default-page body,
html.succubus-account-default-page #container,
html.succubus-account-default-page #contents {
    background: var(--account-page-bg) !important;
    color: var(--account-ink) !important;
}

html.succubus-account-default-page #container {
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100vh - var(--store-header-height, 70px)) !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.succubus-account-default-page #contents {
    width: 100% !important;
    max-width: 720px !important;
    min-height: calc(100vh - var(--store-header-height, 70px)) !important;
    margin: 0 auto !important;
    padding: 18px 16px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* order_list.html uses #order-list instead of the normal #contents wrapper. */
html.succubus-account-default-page #order-list {
    width: 100% !important;
    max-width: 720px !important;
    min-height: calc(100vh - var(--store-header-height, 70px)) !important;
    margin: 0 auto !important;
    padding: 18px 16px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    color: var(--account-ink) !important;
    font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

html.succubus-account-default-page #order-list,
html.succubus-account-default-page #order-list *,
html.succubus-account-default-page #order-list *::before,
html.succubus-account-default-page #order-list *::after {
    box-sizing: border-box;
}

html.succubus-account-default-page #order-list h1,
html.succubus-account-default-page #order-list h2,
html.succubus-account-default-page #order-list h3,
html.succubus-account-default-page #order-list h4,
html.succubus-account-default-page #order-list p,
html.succubus-account-default-page #order-list ul,
html.succubus-account-default-page #order-list ol,
html.succubus-account-default-page #order-list figure {
    margin: 0 !important;
    padding: 0 !important;
}

html.succubus-account-default-page #order-list h1,
html.succubus-account-default-page #order-list h2,
html.succubus-account-default-page #order-list .title,
html.succubus-account-default-page #order-list .page-title {
    margin: 8px 0 22px !important;
    padding: 0 0 18px !important;
    border-bottom: 1px solid var(--account-line) !important;
    color: var(--account-ink) !important;
    font-family: 'Jost', 'Noto Sans KR', Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    line-height: 1.35 !important;
}

html.succubus-account-default-page #order-list .MK_orderlist,
html.succubus-account-default-page #order-list .item-wrap {
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.succubus-account-default-page #order-list .item-wrap,
html.succubus-account-default-page #order-list .order-info {
    overflow: hidden !important;
    border: 1px solid var(--account-line) !important;
    border-radius: 16px !important;
    background: var(--account-card) !important;
    box-shadow: none !important;
}

html.succubus-account-default-page #order-list .order-info {
    display: flex !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 13px 14px !important;
    border-width: 0 0 1px !important;
    border-radius: 0 !important;
    background: var(--account-surface) !important;
}

html.succubus-account-default-page #order-list .order-info,
html.succubus-account-default-page #order-list .order-info a,
html.succubus-account-default-page #order-list .order-info span,
html.succubus-account-default-page #order-list .txt-state {
    color: var(--account-muted) !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
}

html.succubus-account-default-page #order-list .btn-detail,
html.succubus-account-default-page #order-list .btn-set,
html.succubus-account-default-page #order-list .btn-more,
html.succubus-account-default-page #order-list .btn-black,
html.succubus-account-default-page #order-list .MK_link_more_order a {
    display: inline-flex !important;
    min-height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--account-ink) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--account-ink) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

html.succubus-account-default-page #order-list .product-list,
html.succubus-account-default-page #order-list .pro-wrap {
    display: flex !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px !important;
}

html.succubus-account-default-page #order-list .product-list + .product-list,
html.succubus-account-default-page #order-list .pro-wrap + .pro-wrap {
    border-top: 1px solid var(--account-line-soft) !important;
}

html.succubus-account-default-page #order-list .thumb-img,
html.succubus-account-default-page #order-list .thumb-img img {
    display: block !important;
    flex: 0 0 84px !important;
    width: 84px !important;
    height: 84px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: var(--account-surface) !important;
    object-fit: cover !important;
}

html.succubus-account-default-page #order-list .pro-wrap > :not(.thumb-img),
html.succubus-account-default-page #order-list .product-list > :not(.thumb-img) {
    min-width: 0 !important;
}

html.succubus-account-default-page #order-list .pro-name,
html.succubus-account-default-page #order-list .pro-price,
html.succubus-account-default-page #order-list .pro-option {
    display: block !important;
    overflow-wrap: anywhere !important;
}

html.succubus-account-default-page #order-list .pro-name {
    color: var(--account-ink) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
}

html.succubus-account-default-page #order-list .pro-price {
    margin-top: 5px !important;
    color: var(--account-ink) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

html.succubus-account-default-page #order-list .pro-option {
    margin-top: 4px !important;
    color: var(--account-muted) !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
}

html.succubus-account-default-page #order-list .MK_link_more_order,
html.succubus-account-default-page #order-list .tbl,
html.succubus-account-default-page #order-list .layer-delivery-wrap {
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 10px !important;
}

html.succubus-account-default-page #order-list .tbl {
    overflow-x: auto !important;
    border: 1px solid var(--account-line) !important;
    border-radius: 12px !important;
}

html.succubus-account-default-page #contents,
html.succubus-account-default-page #contents *,
html.succubus-account-default-page #contents *::before,
html.succubus-account-default-page #contents *::after {
    box-sizing: border-box;
}

html.succubus-account-default-page #contents a {
    color: inherit;
    text-decoration: none;
}

html.succubus-account-default-page #contents h1,
html.succubus-account-default-page #contents h2,
html.succubus-account-default-page #contents h3,
html.succubus-account-default-page #contents h4,
html.succubus-account-default-page #contents p,
html.succubus-account-default-page #contents ul,
html.succubus-account-default-page #contents ol,
html.succubus-account-default-page #contents dl,
html.succubus-account-default-page #contents figure {
    margin: 0;
    padding: 0;
}

html.succubus-account-default-page #contents ul,
html.succubus-account-default-page #contents ol {
    list-style: none;
}

/* Every default account utility page gets the same small section header. */
html.succubus-account-default-page #contents > h1,
html.succubus-account-default-page #contents > h2,
html.succubus-account-default-page #contents > .title,
html.succubus-account-default-page #contents > .page-title,
html.succubus-account-default-page #contents .content-title,
html.succubus-account-default-page #contents .page_tit,
html.succubus-account-default-page #contents .tit-page {
    margin: 8px 0 22px !important;
    padding: 0 0 18px !important;
    border-bottom: 1px solid var(--account-line) !important;
    color: var(--account-ink) !important;
    font-family: 'Jost', 'Noto Sans KR', Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    line-height: 1.35 !important;
}

html.succubus-account-default-page #contents .content-title::before,
html.succubus-account-default-page #contents .page_tit::before,
html.succubus-account-default-page #contents .tit-page::before {
    display: block;
    margin-bottom: 8px;
    color: var(--account-muted);
    content: 'ACCOUNT';
    font-size: 10px;
    letter-spacing: .18em;
    line-height: 1.2;
}

/* Common Makeshop wrappers become Account-style modules. */
html.succubus-account-default-page #contents > form,
html.succubus-account-default-page #contents > .wrap,
html.succubus-account-default-page #contents > .content,
html.succubus-account-default-page #contents > .sub_content,
html.succubus-account-default-page #contents > .section,
html.succubus-account-default-page #contents > .box,
html.succubus-account-default-page #contents > #login,
html.succubus-account-default-page #contents > #join,
html.succubus-account-default-page #contents > #member,
html.succubus-account-default-page #contents > #order,
html.succubus-account-default-page #contents > .login,
html.succubus-account-default-page #contents > .login_wrap,
html.succubus-account-default-page #contents > .join,
html.succubus-account-default-page #contents > .join_wrap,
html.succubus-account-default-page #contents > .member,
html.succubus-account-default-page #contents > .member_wrap,
html.succubus-account-default-page #contents > .mypage_wrap,
html.succubus-account-default-page #contents > .order_wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--account-page-bg) !important;
    color: var(--account-ink) !important;
}

html.succubus-account-default-page #contents .box,
html.succubus-account-default-page #contents .box-type,
html.succubus-account-default-page #contents .section-box,
html.succubus-account-default-page #contents .login_box,
html.succubus-account-default-page #contents .join_box,
html.succubus-account-default-page #contents .member_box,
html.succubus-account-default-page #contents .order_box,
html.succubus-account-default-page #contents .board_box,
html.succubus-account-default-page #contents .address_box,
html.succubus-account-default-page #contents .coupon_box {
    border: 1px solid var(--account-line) !important;
    border-radius: 16px !important;
    background: var(--account-card) !important;
    box-shadow: none !important;
}

/* Login, registration and member-information fields. */
html.succubus-account-default-page #contents fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

html.succubus-account-default-page #contents legend,
html.succubus-account-default-page #contents label,
html.succubus-account-default-page #contents .label,
html.succubus-account-default-page #contents .tit,
html.succubus-account-default-page #contents th {
    color: var(--account-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
}

html.succubus-account-default-page #contents input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
html.succubus-account-default-page #contents select,
html.succubus-account-default-page #contents textarea {
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid var(--account-line) !important;
    border-radius: 12px !important;
    outline: none !important;
    background: #fff !important;
    color: var(--account-ink) !important;
    font: 400 12px/1.45 'Noto Sans KR', 'Apple SD Gothic Neo', Arial, sans-serif !important;
}

html.succubus-account-default-page #contents textarea {
    min-height: 120px !important;
    resize: vertical;
}

html.succubus-account-default-page #contents input:focus,
html.succubus-account-default-page #contents select:focus,
html.succubus-account-default-page #contents textarea:focus {
    border-color: var(--account-ink) !important;
    box-shadow: 0 0 0 2px rgba(17, 17, 17, .08) !important;
}

html.succubus-account-default-page #contents input[type="checkbox"],
html.succubus-account-default-page #contents input[type="radio"] {
    accent-color: var(--account-ink);
}

html.succubus-account-default-page #contents .form-row,
html.succubus-account-default-page #contents .form_item,
html.succubus-account-default-page #contents .input-row,
html.succubus-account-default-page #contents .input_box,
html.succubus-account-default-page #contents .join_row,
html.succubus-account-default-page #contents .member_row,
html.succubus-account-default-page #contents .login_row {
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    padding: 11px 0 !important;
    border-bottom: 1px solid var(--account-line-soft) !important;
}

/* Standard buttons share the Account page's quiet outline/black action pair. */
html.succubus-account-default-page #contents a.btn,
html.succubus-account-default-page #contents a.button,
html.succubus-account-default-page #contents button,
html.succubus-account-default-page #contents input[type="submit"],
html.succubus-account-default-page #contents input[type="button"],
html.succubus-account-default-page #contents .btn_Black,
html.succubus-account-default-page #contents .btn_basic,
html.succubus-account-default-page #contents .btn_full100,
html.succubus-account-default-page #contents .btn_100 {
    display: inline-flex !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 14px !important;
    border: 1px solid var(--account-ink) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--account-ink) !important;
    font: 600 11px/1 'Noto Sans KR', 'Apple SD Gothic Neo', Arial, sans-serif !important;
    letter-spacing: .04em !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer;
}

html.succubus-account-default-page #contents a.btn_Black,
html.succubus-account-default-page #contents input.btn_Black,
html.succubus-account-default-page #contents button.btn_Black,
html.succubus-account-default-page #contents a.btn_basic_1,
html.succubus-account-default-page #contents input.btn_basic_1,
html.succubus-account-default-page #contents button.btn_basic_1 {
    background: var(--account-accent) !important;
    color: var(--account-accent-ink) !important;
}

html.succubus-account-default-page #contents a.btn:hover,
html.succubus-account-default-page #contents a.button:hover,
html.succubus-account-default-page #contents button:hover,
html.succubus-account-default-page #contents input[type="submit"]:hover,
html.succubus-account-default-page #contents input[type="button"]:hover,
html.succubus-account-default-page #contents a.btn:focus-visible,
html.succubus-account-default-page #contents a.button:focus-visible,
html.succubus-account-default-page #contents button:focus-visible,
html.succubus-account-default-page #contents input[type="submit"]:focus-visible,
html.succubus-account-default-page #contents input[type="button"]:focus-visible {
    background: var(--account-ink) !important;
    color: #fff !important;
    outline: none !important;
}

html.succubus-account-default-page #contents .btn_full100,
html.succubus-account-default-page #contents .btn_100,
html.succubus-account-default-page #contents .btn_box > a:only-child,
html.succubus-account-default-page #contents .button-row > a:only-child,
html.succubus-account-default-page #contents .button-row > button:only-child {
    width: 100% !important;
}

html.succubus-account-default-page #contents .btn_box,
html.succubus-account-default-page #contents .button-row,
html.succubus-account-default-page #contents .btn_area,
html.succubus-account-default-page #contents .form-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 18px !important;
}

/* Tables cover order history, address book, coupon, points and member data. */
html.succubus-account-default-page #contents table {
    width: 100% !important;
    margin: 0 !important;
    border: 1px solid var(--account-line) !important;
    border-spacing: 0 !important;
    border-collapse: separate !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: var(--account-card) !important;
    color: var(--account-ink) !important;
    font-size: 12px !important;
}

html.succubus-account-default-page #contents table th,
html.succubus-account-default-page #contents table td {
    min-height: 44px !important;
    padding: 12px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--account-line-soft) !important;
    background: var(--account-card) !important;
    color: var(--account-ink) !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
    text-align: left !important;
    overflow-wrap: anywhere;
}

html.succubus-account-default-page #contents table th {
    background: var(--account-surface) !important;
    color: var(--account-muted) !important;
    white-space: nowrap;
}

html.succubus-account-default-page #contents table tr:last-child th,
html.succubus-account-default-page #contents table tr:last-child td {
    border-bottom: 0 !important;
}

/* Order/coupon/address lists that are not tables use the same row language. */
html.succubus-account-default-page #contents .list li,
html.succubus-account-default-page #contents .list > li,
html.succubus-account-default-page #contents .board_list > li,
html.succubus-account-default-page #contents .address_list > li,
html.succubus-account-default-page #contents .coupon_list > li,
html.succubus-account-default-page #contents .order_list > li,
html.succubus-account-default-page #contents .point_list > li,
html.succubus-account-default-page #contents .reserve_list > li {
    min-width: 0;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--account-line-soft) !important;
    background: var(--account-card) !important;
    color: var(--account-ink) !important;
}

html.succubus-account-default-page #contents .list li:last-child,
html.succubus-account-default-page #contents .board_list > li:last-child,
html.succubus-account-default-page #contents .address_list > li:last-child,
html.succubus-account-default-page #contents .coupon_list > li:last-child,
html.succubus-account-default-page #contents .order_list > li:last-child,
html.succubus-account-default-page #contents .point_list > li:last-child,
html.succubus-account-default-page #contents .reserve_list > li:last-child {
    border-bottom: 0 !important;
}

/* Native tab strips and policy tabs become the same horizontal account rail. */
html.succubus-account-default-page #contents .tab,
html.succubus-account-default-page #contents .tab_menu,
html.succubus-account-default-page #contents .tab_area,
html.succubus-account-default-page #contents .board_tab,
html.succubus-account-default-page #contents .privercy-contract-tap,
html.succubus-account-default-page #contents .detail_item_nav {
    display: flex !important;
    min-width: 0 !important;
    gap: 0 !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--account-line) !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
}

html.succubus-account-default-page #contents .tab a,
html.succubus-account-default-page #contents .tab_menu a,
html.succubus-account-default-page #contents .tab_area a,
html.succubus-account-default-page #contents .board_tab a,
html.succubus-account-default-page #contents .privercy-contract-tap a,
html.succubus-account-default-page #contents .detail_item_nav a {
    display: inline-flex !important;
    min-height: 42px !important;
    align-items: center !important;
    padding: 0 12px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--account-muted) !important;
    font: 600 10px/1 'Jost', 'Noto Sans KR', Arial, sans-serif !important;
    letter-spacing: .1em !important;
}

html.succubus-account-default-page #contents .tab .on a,
html.succubus-account-default-page #contents .tab_menu .on a,
html.succubus-account-default-page #contents .tab_area .on a,
html.succubus-account-default-page #contents .board_tab .on a,
html.succubus-account-default-page #contents .privercy-contract-tap .sel a,
html.succubus-account-default-page #contents .privercy-contract-tap li.sel a {
    border-bottom: 2px solid var(--account-ink) !important;
    color: var(--account-ink) !important;
}

/* Empty states and pagination are deliberately quiet, like Account. */
html.succubus-account-default-page #contents .empty,
html.succubus-account-default-page #contents .empty-board,
html.succubus-account-default-page #contents .no-data,
html.succubus-account-default-page #contents .nodata,
html.succubus-account-default-page #contents .no_result,
html.succubus-account-default-page #contents .no-result {
    display: grid !important;
    min-height: 150px !important;
    place-items: center !important;
    padding: 24px !important;
    border: 1px solid var(--account-line) !important;
    border-radius: 16px !important;
    background: var(--account-surface) !important;
    color: var(--account-muted) !important;
    font-size: 12px !important;
    text-align: center !important;
}

html.succubus-account-default-page #contents .paging,
html.succubus-account-default-page #contents .pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 22px 0 0 !important;
}

html.succubus-account-default-page #contents .paging a,
html.succubus-account-default-page #contents .pagination a,
html.succubus-account-default-page #contents .paging span,
html.succubus-account-default-page #contents .pagination span {
    display: inline-flex !important;
    width: 32px !important;
    height: 32px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--account-line) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--account-muted) !important;
    font-size: 11px !important;
}

html.succubus-account-default-page #contents .paging .now,
html.succubus-account-default-page #contents .pagination .now,
html.succubus-account-default-page #contents .pagination .active {
    border-color: var(--account-ink) !important;
    background: var(--account-ink) !important;
    color: #fff !important;
}

/* -------------------------------------------------------------------------
   Account Quick Menu page families

   Makeshop uses several unrelated class names for the same utility page,
   depending on the shop module and whether the visitor is logged in.  These
   family rules give the image-heavy and information-heavy pages the same
   Account rhythm without touching their native virtual tags, forms or AJAX.
   ------------------------------------------------------------------------- */

/* Recently viewed products and other native product-list variants. */
html.succubus-account-default-page #contents .product-grid,
html.succubus-account-default-page #contents .product_list,
html.succubus-account-default-page #contents .product-list,
html.succubus-account-default-page #contents .prdList,
html.succubus-account-default-page #contents .prd-list,
html.succubus-account-default-page #contents .goods-list,
html.succubus-account-default-page #contents .item-list,
html.succubus-account-default-page #contents .recent-list,
html.succubus-account-default-page #contents .recent-product-list,
html.succubus-account-default-page #contents .recent_product_list,
html.succubus-account-default-page #contents .wish-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.succubus-account-default-page #contents .product-grid > li,
html.succubus-account-default-page #contents .product_list > li,
html.succubus-account-default-page #contents .product-list > li,
html.succubus-account-default-page #contents .prdList > li,
html.succubus-account-default-page #contents .prd-list > li,
html.succubus-account-default-page #contents .goods-list > li,
html.succubus-account-default-page #contents .item-list > li,
html.succubus-account-default-page #contents .recent-list > li,
html.succubus-account-default-page #contents .recent-product-list > li,
html.succubus-account-default-page #contents .recent_product_list > li,
html.succubus-account-default-page #contents .product-card,
html.succubus-account-default-page #contents .product_item,
html.succubus-account-default-page #contents .recent_product {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border: 1px solid var(--account-line) !important;
    border-radius: 16px !important;
    background: var(--account-card) !important;
    box-shadow: none !important;
}

html.succubus-account-default-page #contents .product-grid img,
html.succubus-account-default-page #contents .product_list img,
html.succubus-account-default-page #contents .product-list img,
html.succubus-account-default-page #contents .prdList img,
html.succubus-account-default-page #contents .prd-list img,
html.succubus-account-default-page #contents .goods-list img,
html.succubus-account-default-page #contents .item-list img,
html.succubus-account-default-page #contents .recent-list img,
html.succubus-account-default-page #contents .recent-product-list img,
html.succubus-account-default-page #contents .recent_product_list img,
html.succubus-account-default-page #contents .product-card img,
html.succubus-account-default-page #contents .product_item img,
html.succubus-account-default-page #contents .recent_product img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    background: var(--account-surface) !important;
}

html.succubus-account-default-page #contents .product-image,
html.succubus-account-default-page #contents .product_img,
html.succubus-account-default-page #contents .recent-image,
html.succubus-account-default-page #contents .recent_product_image {
    display: block !important;
    overflow: hidden !important;
    aspect-ratio: 1 / 1 !important;
    background: var(--account-surface) !important;
}

html.succubus-account-default-page #contents .product-image img,
html.succubus-account-default-page #contents .product_img img,
html.succubus-account-default-page #contents .recent-image img,
html.succubus-account-default-page #contents .recent_product_image img {
    height: 100% !important;
    object-fit: cover !important;
}

html.succubus-account-default-page #contents .product-info,
html.succubus-account-default-page #contents .product_info,
html.succubus-account-default-page #contents .recent_product_info {
    display: flex !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 11px 12px 12px !important;
}

html.succubus-account-default-page #contents .product-name,
html.succubus-account-default-page #contents .product_name,
html.succubus-account-default-page #contents .recent_product_name {
    display: -webkit-box !important;
    overflow: hidden !important;
    color: var(--account-ink) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

html.succubus-account-default-page #contents .product-subname,
html.succubus-account-default-page #contents .product_subname,
html.succubus-account-default-page #contents .recent_product_subname,
html.succubus-account-default-page #contents .product-status {
    color: var(--account-muted) !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
}

html.succubus-account-default-page #contents .product-price,
html.succubus-account-default-page #contents .product_price,
html.succubus-account-default-page #contents .recent_product_price {
    margin-top: auto !important;
    color: var(--account-ink) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

html.succubus-account-default-page #contents .btn-line,
html.succubus-account-default-page #contents .product-card .btn,
html.succubus-account-default-page #contents .product_item .btn {
    width: 100% !important;
    min-height: 38px !important;
    margin-top: 3px !important;
    border-color: var(--account-line) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--account-ink) !important;
    font-size: 10px !important;
}

/* Point, reserve, deposit and coupon summaries. */
html.succubus-account-default-page #contents .notice-info,
html.succubus-account-default-page #contents .cautionBox,
html.succubus-account-default-page #contents .summary,
html.succubus-account-default-page #contents .summary-box,
html.succubus-account-default-page #contents .point-summary,
html.succubus-account-default-page #contents .reserve-summary,
html.succubus-account-default-page #contents .deposit-summary,
html.succubus-account-default-page #contents .coupon-summary {
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 16px !important;
    border: 1px solid var(--account-line) !important;
    border-radius: 16px !important;
    background: var(--account-surface) !important;
    color: var(--account-ink) !important;
    line-height: 1.55 !important;
}

html.succubus-account-default-page #contents .notice-info strong,
html.succubus-account-default-page #contents .summary strong,
html.succubus-account-default-page #contents .summary-box strong,
html.succubus-account-default-page #contents .point-summary strong,
html.succubus-account-default-page #contents .reserve-summary strong,
html.succubus-account-default-page #contents .deposit-summary strong {
    color: var(--account-ink) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

html.succubus-account-default-page #contents .search_reserve,
html.succubus-account-default-page #contents .reserve-search,
html.succubus-account-default-page #contents .coupon-search,
html.succubus-account-default-page #contents .filter-area {
    display: flex !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 14px !important;
    padding: 10px !important;
    border: 1px solid var(--account-line) !important;
    border-radius: 14px !important;
    background: #fff !important;
}

/* Coupon cards, attendance records, address book and gift boxes. */
html.succubus-account-default-page #contents .coupon-list,
html.succubus-account-default-page #contents .coupon_list,
html.succubus-account-default-page #contents .coupon-items,
html.succubus-account-default-page #contents .attendance-list,
html.succubus-account-default-page #contents .address-list,
html.succubus-account-default-page #contents .delivery-list,
html.succubus-account-default-page #contents .gift-list,
html.succubus-account-default-page #contents .present-list {
    display: grid !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.succubus-account-default-page #contents .coupon-list > li,
html.succubus-account-default-page #contents .coupon_list > li,
html.succubus-account-default-page #contents .coupon-items > li,
html.succubus-account-default-page #contents .attendance-list > li,
html.succubus-account-default-page #contents .address-list > li,
html.succubus-account-default-page #contents .delivery-list > li,
html.succubus-account-default-page #contents .gift-list > li,
html.succubus-account-default-page #contents .present-list > li,
html.succubus-account-default-page #contents .coupon,
html.succubus-account-default-page #contents .coupon-item,
html.succubus-account-default-page #contents .address-item,
html.succubus-account-default-page #contents .delivery-item,
html.succubus-account-default-page #contents .gift-item,
html.succubus-account-default-page #contents .present-item {
    min-width: 0 !important;
    padding: 14px !important;
    border: 1px solid var(--account-line) !important;
    border-radius: 16px !important;
    background: var(--account-card) !important;
    color: var(--account-ink) !important;
    box-shadow: none !important;
}

html.succubus-account-default-page #contents .coupon .c-name,
html.succubus-account-default-page #contents .coupon .c-txt,
html.succubus-account-default-page #contents .coupon-item .c-name,
html.succubus-account-default-page #contents .coupon-item .c-txt,
html.succubus-account-default-page #contents .gift-item .title,
html.succubus-account-default-page #contents .present-item .title {
    display: block !important;
    color: var(--account-ink) !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
}

html.succubus-account-default-page #contents .coupon .btn-down,
html.succubus-account-default-page #contents .coupon-item .btn-down,
html.succubus-account-default-page #contents .btn_White,
html.succubus-account-default-page #contents .btn_Grey {
    min-height: 38px !important;
    border: 1px solid var(--account-ink) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--account-ink) !important;
}

html.succubus-account-default-page #contents .calendar,
html.succubus-account-default-page #contents .attendance-calendar,
html.succubus-account-default-page #contents .attend-calendar {
    overflow: hidden !important;
    margin: 0 0 14px !important;
    border: 1px solid var(--account-line) !important;
    border-radius: 16px !important;
    background: var(--account-card) !important;
}

/* Email inquiry, own posts, notices and the member-policy/withdrawal pages. */
html.succubus-account-default-page #contents .board,
html.succubus-account-default-page #contents .boardList,
html.succubus-account-default-page #contents .list_board,
html.succubus-account-default-page #contents .article-list,
html.succubus-account-default-page #contents .article,
html.succubus-account-default-page #contents .view,
html.succubus-account-default-page #contents .write,
html.succubus-account-default-page #contents .m2m,
html.succubus-account-default-page #contents .email-inquiry,
html.succubus-account-default-page #contents .withdraw,
html.succubus-account-default-page #contents .withdraw-reason,
html.succubus-account-default-page #contents .contract,
html.succubus-account-default-page #contents .privercy-contract,
html.succubus-account-default-page #contents #terms {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 14px !important;
    padding: 16px !important;
    border: 1px solid var(--account-line) !important;
    border-radius: 16px !important;
    background: var(--account-card) !important;
    color: var(--account-ink) !important;
    box-shadow: none !important;
}

html.succubus-account-default-page #contents .detail_head,
html.succubus-account-default-page #contents .cont_wrap,
html.succubus-account-default-page #contents .article-head,
html.succubus-account-default-page #contents .board-head,
html.succubus-account-default-page #contents .util {
    display: flex !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--account-line-soft) !important;
}

html.succubus-account-default-page #contents .contract pre,
html.succubus-account-default-page #contents .contract .terms,
html.succubus-account-default-page #contents .contract .txt,
html.succubus-account-default-page #contents .privercy-contract .txt,
html.succubus-account-default-page #contents .withdraw .notice,
html.succubus-account-default-page #contents .withdraw-reason .notice {
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid var(--account-line-soft) !important;
    border-radius: 12px !important;
    background: var(--account-surface) !important;
    color: var(--account-muted) !important;
    font: 400 11px/1.7 'Noto Sans KR', 'Apple SD Gothic Neo', Arial, sans-serif !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
}

html.succubus-account-default-page #contents .article p,
html.succubus-account-default-page #contents .view p,
html.succubus-account-default-page #contents .m2m p,
html.succubus-account-default-page #contents .email-inquiry p {
    color: var(--account-ink) !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
}

@media (min-width: 560px) {
    html.succubus-account-default-page #contents .product-grid,
    html.succubus-account-default-page #contents .product_list,
    html.succubus-account-default-page #contents .product-list,
    html.succubus-account-default-page #contents .prdList,
    html.succubus-account-default-page #contents .prd-list,
    html.succubus-account-default-page #contents .goods-list,
    html.succubus-account-default-page #contents .item-list,
    html.succubus-account-default-page #contents .recent-list,
    html.succubus-account-default-page #contents .recent-product-list,
    html.succubus-account-default-page #contents .recent_product_list,
    html.succubus-account-default-page #contents .wish-container {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 380px) {
    html.succubus-account-default-page #contents {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    html.succubus-account-default-page #contents .form-row,
    html.succubus-account-default-page #contents .form_item,
    html.succubus-account-default-page #contents .input-row,
    html.succubus-account-default-page #contents .input_box,
    html.succubus-account-default-page #contents .join_row,
    html.succubus-account-default-page #contents .member_row,
    html.succubus-account-default-page #contents .login_row {
        grid-template-columns: 72px minmax(0, 1fr) !important;
        gap: 8px !important;
    }
}

/* 2026-09-16 correction: the homepage header is always transparent.  The
   hero owns the equal-height white band above the artwork, so scroll classes
   must never turn this fixed header into a white or frosted panel. */
body.succubus-home-page #header#header,
html.succubus-home-page #header#header,
html.succubus-preload-day body.succubus-home-page #header#header,
html.succubus-day body.succubus-home-page #header#header,
html.succubus-preload-night body.succubus-home-page #header#header,
html.succubus-night body.succubus-home-page #header#header {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* 2026-09-16: the open account/menu DAYNIGHT control uses the same visual
   language as the homepage hero control: a white 92x42 capsule, a sliding
   plum selection layer, and the supplied sun/moon artwork above it.  Keep
   the row label and the existing theme event contract unchanged. */
aside#site-account-menu .user_m__theme-toggle {
    position: relative !important;
    display: block !important;
    flex: 0 0 92px !important;
    width: 92px !important;
    height: 42px !important;
    padding: 3px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(38, 28, 37, .42) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .9) !important;
    background-color: rgba(255, 255, 255, .9) !important;
    box-shadow: 0 6px 16px rgba(31, 21, 28, .18), inset 0 1px 0 rgba(255, 255, 255, .96) !important;
    color: #221b25 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    font-size: 0 !important;
}
aside#site-account-menu .user_m__theme-toggle::before {
    content: "" !important;
    position: absolute !important;
    z-index: 1 !important;
    top: 3px !important;
    left: 3px !important;
    width: calc(50% - 3px) !important;
    height: calc(100% - 6px) !important;
    border-radius: 999px !important;
    background: #3b1f32 !important;
    box-shadow: 0 2px 7px rgba(44, 13, 34, .3), 0 0 8px rgba(226, 88, 146, .16) !important;
    transform: translateX(0) !important;
    transition: transform .58s cubic-bezier(.22, .61, .36, 1), box-shadow .32s ease !important;
    pointer-events: none !important;
}
aside#site-account-menu .user_m__theme-toggle.is-active::before {
    transform: translateX(100%) !important;
    background: #7c315f !important;
    box-shadow: 0 2px 7px rgba(44, 13, 34, .34), 0 0 10px rgba(238, 92, 157, .3) !important;
}
aside#site-account-menu .user_m__theme-toggle .header_theme_toggle__icons {
    position: absolute !important;
    z-index: 2 !important;
    inset: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-items: center !important;
    width: auto !important;
    height: auto !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    pointer-events: none !important;
}
aside#site-account-menu .user_m__theme-toggle .header_theme_toggle__image {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    opacity: .48 !important;
    filter: drop-shadow(0 1px 1px rgba(22, 12, 15, .22)) !important;
    transform: scale(.94) !important;
    transition: opacity .42s ease, transform .58s cubic-bezier(.22, .61, .36, 1), filter .42s ease !important;
}
aside#site-account-menu .user_m__theme-toggle:not(.is-active) .header_theme_toggle__image--day,
aside#site-account-menu .user_m__theme-toggle.is-active .header_theme_toggle__image--night {
    opacity: 1 !important;
    transform: scale(1.08) !important;
    filter: drop-shadow(0 1px 2px rgba(22, 12, 15, .28)) !important;
}
html.succubus-night aside#site-account-menu .user_m__theme-toggle .header_theme_toggle__image,
body.succubus-night aside#site-account-menu .user_m__theme-toggle .header_theme_toggle__image {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, .92)) drop-shadow(0 1px 2px rgba(22, 12, 15, .28)) !important;
}
aside#site-account-menu .user_m__theme-toggle:focus-visible {
    outline: 2px solid #221b25 !important;
    outline-offset: 4px !important;
}
@media (prefers-reduced-motion: reduce) {
    aside#site-account-menu .user_m__theme-toggle::before,
    aside#site-account-menu .user_m__theme-toggle .header_theme_toggle__image {
        transition: none !important;
    }
}

/* Global mobile orientation guard. CSS catches the first paint on narrow
   phones; the shared Top JS adds the class for coarse-pointer tablets and for
   browsers whose orientation media query lags behind the viewport resize. */
#succubus-portrait-gate {
    display: none;
    position: fixed;
    z-index: 2147483647;
    inset: 0;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    width: 100vw;
    min-width: 320px;
    height: 100vh;
    min-height: 100dvh;
    padding: 24px;
    color: #241b23;
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, .96), transparent 34%),
        linear-gradient(145deg, #fffaf8 0%, #f4e9ee 54%, #ead9e2 100%);
    text-align: center;
    pointer-events: auto;
    user-select: none;
}
html.succubus-portrait-required,
html.succubus-portrait-required body {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}
html.succubus-portrait-required #succubus-portrait-gate {
    display: flex !important;
}
.succubus-portrait-gate__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: min(100%, 360px);
    min-height: 250px;
    padding: 28px 24px 30px;
    box-sizing: border-box;
    border: 1px solid rgba(111, 59, 87, .16);
    border-radius: 26px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 18px 48px rgba(89, 47, 71, .14), inset 0 1px 0 rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(16px) saturate(1.06);
    backdrop-filter: blur(16px) saturate(1.06);
}
.succubus-portrait-gate__eyebrow {
    color: #8d6579;
    font: 600 10px/1.2 'Jost', Arial, sans-serif;
    letter-spacing: .22em;
}
.succubus-portrait-gate__icon {
    position: relative;
    display: block;
    width: 54px;
    height: 74px;
    margin: 4px 0 3px;
    border: 2px solid #2c202b;
    border-radius: 8px;
    box-shadow: 0 0 0 5px rgba(152, 76, 86, .08);
    transform: rotate(90deg);
}
.succubus-portrait-gate__icon::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 8px;
    width: 18px;
    height: 3px;
    border-radius: 999px;
    background: #2c202b;
    transform: translateX(-50%);
}
.succubus-portrait-gate__icon::after {
    content: '♥';
    position: absolute;
    left: 50%;
    bottom: 12px;
    color: #e94d91;
    font: 700 17px/1 Arial, sans-serif;
    transform: translateX(-50%);
}
.succubus-portrait-gate__title {
    color: #241b23;
    font: 700 18px/1.25 'Jost', Arial, sans-serif;
    letter-spacing: .12em;
}
.succubus-portrait-gate__copy {
    color: #78636f;
    font: 500 14px/1.5 'Noto Sans KR', Arial, sans-serif;
}
@media screen and (max-width: 850px) and (orientation: landscape) {
    #succubus-portrait-gate {
        display: flex !important;
    }
    html,
    body {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }
}

/* 2026-09-17 menu theme isolation.  The account sheet is a day-palette
   surface even when the shared theme state is NIGHT.  Its DAYNIGHT control
   deliberately mirrors the homepage capsule; the legacy icons pseudo-layer
   is removed so it cannot create a second, differently-sized slider.  While
   the sheet is open, make the fixed header opaque as well.  The homepage
   header is transparent by design, but an opaque sheet header prevents the
   hero's top edge from flashing through during a theme switch. */
html.succubus-menu-open #header#header,
body.succubus-menu-open #header#header {
    --header-ink: #000 !important;
    z-index: 102 !important;
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    border-bottom-color: rgba(17, 17, 17, .12) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: #000 !important;
    transition: none !important;
}
html.succubus-menu-open #header#header .head_inner .ham a,
body.succubus-menu-open #header#header .head_inner .ham a,
html.succubus-menu-open #header#header .head_actions .head_action,
body.succubus-menu-open #header#header .head_actions .head_action,
html.succubus-menu-open #header#header .head_inner h1.logo a,
body.succubus-menu-open #header#header .head_inner h1.logo a,
html.succubus-menu-open #header#header .head_inner h1.logo .logo__wordmark,
body.succubus-menu-open #header#header .head_inner h1.logo .logo__wordmark {
    color: #000 !important;
}

html.succubus-menu-open #site-account-menu,
body.succubus-menu-open #site-account-menu {
    --menu-bg: #fff !important;
    --menu-ink: #111 !important;
    --menu-muted: #777 !important;
    --menu-line: rgba(17, 17, 17, .16) !important;
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    color: #111 !important;
    transition: left .35s ease, opacity .25s ease !important;
}
html.succubus-menu-open #site-account-menu .asi_inner,
body.succubus-menu-open #site-account-menu .asi_inner,
html.succubus-menu-open #site-account-menu .asi_inner a,
body.succubus-menu-open #site-account-menu .asi_inner a,
html.succubus-menu-open #site-account-menu .main_m__trigger,
body.succubus-menu-open #site-account-menu .main_m__trigger,
html.succubus-menu-open #site-account-menu .main_m__label,
body.succubus-menu-open #site-account-menu .main_m__label {
    color: #111 !important;
}
html.succubus-menu-open #site-account-menu .user_m__theme-label,
body.succubus-menu-open #site-account-menu .user_m__theme-label,
html.succubus-menu-open #site-account-menu .user_m__eyebrow,
body.succubus-menu-open #site-account-menu .user_m__eyebrow,
html.succubus-menu-open #site-account-menu .menu_category_label,
body.succubus-menu-open #site-account-menu .menu_category_label {
    color: #777 !important;
}
html.succubus-menu-open #site-account-menu .user_m__account-actions a,
body.succubus-menu-open #site-account-menu .user_m__account-actions a {
    background: transparent !important;
    border-color: rgba(17, 17, 17, .16) !important;
    color: #111 !important;
}
html.succubus-menu-open #site-account-menu .user_m__account-actions a:first-child,
body.succubus-menu-open #site-account-menu .user_m__account-actions a:first-child {
    background: rgba(17, 17, 17, .06) !important;
    border-color: rgba(17, 17, 17, .32) !important;
}

/* NIGHT changes the hero artwork only. Every layer inside the open account
   sheet must remain the same white DAY presentation, including the layers
   that previously inherited --succubus-page-bg: #000 from the page theme. */
html.succubus-menu-open #site-account-menu,
body.succubus-menu-open #site-account-menu {
    --succubus-page-bg: #fff !important;
    --succubus-surface: #fff !important;
    --succubus-surface-muted: #f7f5f4 !important;
    --succubus-active-bg: rgba(17, 17, 17, .06) !important;
    --succubus-ink: #111 !important;
    --succubus-muted: #777 !important;
    --succubus-line: rgba(17, 17, 17, .16) !important;
}
html.succubus-menu-open #site-account-menu .asi_inner,
body.succubus-menu-open #site-account-menu .asi_inner,
html.succubus-menu-open #site-account-menu .asi_inner .as_top,
body.succubus-menu-open #site-account-menu .asi_inner .as_top,
html.succubus-menu-open #site-account-menu .asi_inner .as_bottom,
body.succubus-menu-open #site-account-menu .asi_inner .as_bottom,
html.succubus-menu-open #site-account-menu .asi_inner .as_bottom nav,
body.succubus-menu-open #site-account-menu .asi_inner .as_bottom nav,
html.succubus-menu-open #site-account-menu .asi_inner .as_bottom nav ul.sub_m,
body.succubus-menu-open #site-account-menu .asi_inner .as_bottom nav ul.sub_m {
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    color: #111 !important;
    border-color: rgba(17, 17, 17, .16) !important;
}
html.succubus-menu-open #site-account-menu .asi_inner .user_m,
body.succubus-menu-open #site-account-menu .asi_inner .user_m,
html.succubus-menu-open #site-account-menu .asi_inner .user_m__theme-row,
body.succubus-menu-open #site-account-menu .asi_inner .user_m__theme-row,
html.succubus-menu-open #site-account-menu .asi_inner .menu_category_label,
body.succubus-menu-open #site-account-menu .asi_inner .menu_category_label,
html.succubus-menu-open #site-account-menu .asi_inner .main_m__trigger,
body.succubus-menu-open #site-account-menu .asi_inner .main_m__trigger,
html.succubus-menu-open #site-account-menu .asi_inner .main_m__label,
body.succubus-menu-open #site-account-menu .asi_inner .main_m__label {
    background-color: transparent !important;
    color: #111 !important;
}
html.succubus-menu-open #site-account-menu .asi_inner .user_m__theme-label,
body.succubus-menu-open #site-account-menu .asi_inner .user_m__theme-label,
html.succubus-menu-open #site-account-menu .asi_inner .user_m__eyebrow,
body.succubus-menu-open #site-account-menu .asi_inner .user_m__eyebrow,
html.succubus-menu-open #site-account-menu .asi_inner .menu_category_label,
body.succubus-menu-open #site-account-menu .asi_inner .menu_category_label {
    color: #777 !important;
}

/* Exact homepage DAY/NIGHT capsule geometry for the open menu. */
aside#site-account-menu .user_m__theme-toggle {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    display: block !important;
    flex: 0 0 92px !important;
    width: 92px !important;
    height: 42px !important;
    padding: 3px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(38, 28, 37, .42) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .9) !important;
    background-color: rgba(255, 255, 255, .9) !important;
    box-shadow: 0 6px 16px rgba(31, 21, 28, .18), inset 0 1px 0 rgba(255, 255, 255, .96) !important;
    color: #221b25 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    font-size: 0 !important;
}
aside#site-account-menu .user_m__theme-toggle .header_theme_toggle__icons {
    position: absolute !important;
    z-index: 2 !important;
    inset: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-items: center !important;
    width: auto !important;
    height: auto !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    pointer-events: none !important;
}
/* This pseudo-element belonged to the retired 54px menu control. */
aside#site-account-menu .user_m__theme-toggle .header_theme_toggle__icons::before,
aside#site-account-menu .user_m__theme-toggle .header_theme_toggle__icons::after {
    display: none !important;
    content: none !important;
}
aside#site-account-menu .user_m__theme-toggle .header_theme_toggle__image {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    opacity: .48 !important;
    filter: drop-shadow(0 1px 1px rgba(22, 12, 15, .22)) !important;
    transform: scale(.94) !important;
    transition: opacity .42s ease, transform .58s cubic-bezier(.22, .61, .36, 1), filter .42s ease !important;
}
aside#site-account-menu .user_m__theme-toggle:not(.is-active) .header_theme_toggle__image--day,
aside#site-account-menu .user_m__theme-toggle.is-active .header_theme_toggle__image--night {
    opacity: 1 !important;
    transform: scale(1.08) !important;
    filter: drop-shadow(0 1px 2px rgba(22, 12, 15, .28)) !important;
}
html.succubus-menu-open aside#site-account-menu .user_m__theme-toggle,
body.succubus-menu-open aside#site-account-menu .user_m__theme-toggle,
html.succubus-menu-open aside#site-account-menu .user_m__theme-toggle .header_theme_toggle__image,
body.succubus-menu-open aside#site-account-menu .user_m__theme-toggle .header_theme_toggle__image {
    transition-duration: .58s !important;
}

/* 2026-09-17 correction: the normal homepage header is frosted glass, not
   raw transparency. Keep a light translucent veil and blur over the hero so
   the artwork remains present but the header still reads as a real surface.
   The menu-open rules above intentionally win and keep that surface solid
   white while the account sheet is visible. */
html.succubus-home-page body.succubus-home-page:not(.succubus-menu-open) #header#header,
html.succubus-home-page:not(.succubus-menu-open) #header#header,
body.succubus-home-page:not(.succubus-menu-open) #header#header {
    --header-ink: #000 !important;
    background: rgba(247, 244, 239, .34) !important;
    background-color: rgba(247, 244, 239, .34) !important;
    background-image: none !important;
    border-bottom-color: rgba(255, 255, 255, .24) !important;
    box-shadow: 0 6px 16px rgba(47, 37, 37, .08) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.04) !important;
    backdrop-filter: blur(16px) saturate(1.04) !important;
    color: #000 !important;
    transition: background-color .6s ease, color .6s ease !important;
}

/* Makeshop injects Malltail's Global Shopping widget as a shadow-DOM
   <modal-widget> on every mobile page. The host is not part of the
   SUCCUBUS storefront, so remove it globally rather than only on the home
   page. */
html body modal-widget,
html modal-widget {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 2026-09-17 MODE-ONLY CONTRACT
 *
 * The moon/day control changes the selected artwork/form only. It is not a
 * dark-mode switch. The old NIGHT palette hooks are deliberately removed by
 * the shared Top script; these final selectors also keep every global
 * surface light if an older cached page briefly writes the old state back. */
html[data-succubus-theme-mode="night"],
body[data-succubus-theme-mode="night"] {
    --succubus-page-bg: #fff !important;
    --succubus-surface: #fff !important;
    --succubus-surface-muted: #f5f5f5 !important;
    --succubus-ink: #000 !important;
    --succubus-muted: #666 !important;
    --succubus-line: rgba(0, 0, 0, .16) !important;
    --succubus-soft-line: rgba(0, 0, 0, .08) !important;
    --succubus-active-bg: #000 !important;
    --succubus-active-ink: #fff !important;
    color-scheme: light !important;
}

html[data-succubus-theme-mode="night"] body,
body[data-succubus-theme-mode="night"] {
    background-color: #fff !important;
    color: #000 !important;
}

html[data-succubus-theme-mode="night"] #header,
body[data-succubus-theme-mode="night"] #header,
html[data-succubus-theme-mode="night"] .preview-shell .preview-header,
body[data-succubus-theme-mode="night"] .preview-shell .preview-header {
    --header-ink: #000 !important;
    background: rgba(247, 244, 239, .34) !important;
    background-color: rgba(247, 244, 239, .34) !important;
    background-image: none !important;
    border-bottom-color: rgba(255, 255, 255, .24) !important;
    box-shadow: 0 6px 16px rgba(47, 37, 37, .08) !important;
    color: #000 !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.04) !important;
    backdrop-filter: blur(16px) saturate(1.04) !important;
}

html[data-succubus-theme-mode="night"] #header .header_theme_toggle,
body[data-succubus-theme-mode="night"] #header .header_theme_toggle,
html[data-succubus-theme-mode="night"] aside .header_theme_toggle,
body[data-succubus-theme-mode="night"] aside .header_theme_toggle {
    --theme-toggle-track: rgba(17, 17, 17, .08) !important;
    --theme-toggle-thumb: #fff !important;
    --theme-toggle-thumb-active: #111 !important;
    color: #111 !important;
}

html[data-succubus-theme-mode="night"] #header img,
body[data-succubus-theme-mode="night"] #header img,
html[data-succubus-theme-mode="night"] img[data-succubus-night-fallback],
body[data-succubus-theme-mode="night"] img[data-succubus-night-fallback] {
    filter: none !important;
}

html[data-succubus-theme-mode="night"] #header_search_panel,
body[data-succubus-theme-mode="night"] #header_search_panel {
    --search-bg: rgba(255, 248, 243, .96) !important;
    --search-ink: #302526 !important;
    --search-muted: #987e78 !important;
    --search-line: rgba(74, 57, 48, .22) !important;
    --search-close-bg: #fff8f3 !important;
    background: var(--search-bg) !important;
    background-image: none !important;
    color: var(--search-ink) !important;
}

html[data-succubus-theme-mode="night"] aside,
body[data-succubus-theme-mode="night"] aside,
html[data-succubus-theme-mode="night"] #site-account-menu,
body[data-succubus-theme-mode="night"] #site-account-menu {
    --menu-bg: #fff !important;
    --menu-ink: #111 !important;
    --menu-muted: #777 !important;
    --menu-line: rgba(17, 17, 17, .16) !important;
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    color: #111 !important;
}

html[data-succubus-theme-mode="night"] #site-account-menu .asi_inner,
body[data-succubus-theme-mode="night"] #site-account-menu .asi_inner,
html[data-succubus-theme-mode="night"] #site-account-menu .asi_inner a,
body[data-succubus-theme-mode="night"] #site-account-menu .asi_inner a,
html[data-succubus-theme-mode="night"] #site-account-menu .asi_inner .main_m__trigger,
body[data-succubus-theme-mode="night"] #site-account-menu .asi_inner .main_m__trigger {
    color: #111 !important;
}

html[data-succubus-theme-mode="night"] #container,
body[data-succubus-theme-mode="night"] #container,
html[data-succubus-theme-mode="night"] #contents,
body[data-succubus-theme-mode="night"] #contents {
    background-color: #fff !important;
    color: #000 !important;
}

/* Homepage controls are authored in the main pane, which is loaded after the
 * shared Top CSS. Use a deliberately stronger selector here so an older main
 * stylesheet cannot reintroduce a black sheet when the moon artwork is active. */
html[data-succubus-theme-mode="night"][data-mascot-mode="succubus"] body[data-succubus-theme-mode="night"][data-mascot-mode="succubus"] #sec1#sec1[data-home-hero-schedule] .home-hero-lower-ui,
html[data-succubus-theme-mode="night"][data-mascot-mode="succubus"] body[data-succubus-theme-mode="night"][data-mascot-mode="succubus"] #sec1#sec1[data-home-hero-schedule] .home-hero-lower-ui::before {
    --hero-sheet-bg: #fff !important;
    --hero-sheet-ink: #000 !important;
    --hero-sheet-muted: #666 !important;
    --hero-sheet-line: rgba(0, 0, 0, .16) !important;
    --hero-sheet-circle: #fff !important;
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    color: #302526 !important;
    box-shadow: 0 -16px 32px rgba(35, 23, 25, .16) !important;
}

html[data-succubus-theme-mode="night"][data-mascot-mode="succubus"] body[data-succubus-theme-mode="night"][data-mascot-mode="succubus"] #sec1#sec1[data-home-hero-schedule] .home-hero-mode-toggle,
html[data-succubus-theme-mode="night"][data-mascot-mode="succubus"] body[data-succubus-theme-mode="night"][data-mascot-mode="succubus"] #sec1#sec1[data-home-hero-schedule] .home-hero-bottom-nav {
    --hero-nav-bg: rgba(255, 250, 246, .88) !important;
    --hero-nav-line: rgba(74, 57, 48, .18) !important;
    --hero-nav-muted: rgba(74, 57, 48, .64) !important;
    --hero-nav-active-bg: #372b2d !important;
    --hero-nav-active-ink: #fff8f4 !important;
    --hero-nav-dot: #c78986 !important;
    background-color: rgba(255, 250, 246, .88) !important;
    border-color: rgba(74, 57, 48, .18) !important;
    color: #302526 !important;
    box-shadow: 0 11px 25px rgba(56, 39, 38, .14), inset 0 1px 0 rgba(255,255,255,.78), inset 0 -1px 0 rgba(74,57,48,.08) !important;
}

html[data-succubus-theme-mode="night"][data-mascot-mode="succubus"] body[data-succubus-theme-mode="night"][data-mascot-mode="succubus"] #sec1#sec1[data-home-hero-schedule] .home-hero-mode-toggle {
    background: rgba(255, 255, 255, .9) !important;
    color: #241d25 !important;
}

html[data-succubus-theme-mode="night"][data-mascot-mode="succubus"] body[data-succubus-theme-mode="night"][data-mascot-mode="succubus"] #sec24#sec24.category-rail {
    --category-bg: transparent !important;
    --category-ink: #000 !important;
    --category-muted: #666 !important;
    --category-line: rgba(0, 0, 0, .16) !important;
    --category-circle: #fff !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #000 !important;
}

html[data-succubus-theme-mode="night"][data-mascot-mode="succubus"] body[data-succubus-theme-mode="night"][data-mascot-mode="succubus"] .home-products.home-products {
    --shopbrand-bg: #fff !important;
    --shopbrand-card: #fff !important;
    --shopbrand-ink: #111 !important;
    --shopbrand-muted: #707070 !important;
    --shopbrand-line: rgba(0, 0, 0, .14) !important;
    --shopbrand-thumb-bg: #f4f4f4 !important;
    --shopbrand-old-price: #777 !important;
    --shopbrand-wish-ink: #111 !important;
    --shopbrand-wish-outline: #111 !important;
    background: #fff !important;
    background-color: #fff !important;
    color: #111 !important;
}

html[data-succubus-theme-mode="night"][data-mascot-mode="succubus"] body[data-succubus-theme-mode="night"][data-mascot-mode="succubus"] #mascot-reveal#mascot-reveal {
    --mascot-bg: #f4efe8 !important;
    --mascot-panel: rgba(255,255,255,.78) !important;
    --mascot-text: #322a2a !important;
    --mascot-muted: #8d7e78 !important;
    --mascot-line: rgba(74,57,48,.22) !important;
    background: #f4efe8 !important;
    background-color: #f4efe8 !important;
    color: #322a2a !important;
}

html[data-succubus-theme-mode="night"] #footer.store-footer,
body[data-succubus-theme-mode="night"] #footer.store-footer,
html[data-succubus-theme-mode="night"] .foot_functional-wrap,
body[data-succubus-theme-mode="night"] .foot_functional-wrap {
    --footer-bg: #fff !important;
    --footer-panel: #fff !important;
    --footer-ink: #302526 !important;
    --footer-muted: #7d7070 !important;
    --footer-soft: #9b8c8d !important;
    --footer-line: rgba(48,37,38,.14) !important;
    --footer-accent: #b87988 !important;
    --footer-active-bg: #302526 !important;
    --footer-active-ink: #fff !important;
    --footer-dot: #c78986 !important;
    background: #fff !important;
    background-color: #fff !important;
    color: #302526 !important;
}

html[data-succubus-theme-mode="night"] #footer.store-footer img,
body[data-succubus-theme-mode="night"] #footer.store-footer img,
html[data-succubus-theme-mode="night"] .foot_functional-wrap img,
body[data-succubus-theme-mode="night"] .foot_functional-wrap img {
    filter: none !important;
}

/* FINAL GLOBAL MODE-ONLY FALLBACK
 *
 * This selector set deliberately keys off the shared light-palette marker,
 * not the artwork mode. It covers delayed Makeshop page panes that load their
 * own old night stylesheet after the common header. The moon may still select
 * NIGHT artwork, but it can never select a black page/control palette. */
html[data-succubus-ui-palette="light"],
body[data-succubus-ui-palette="light"],
html[data-succubus-theme-mode="night"],
body[data-succubus-theme-mode="night"] {
    color-scheme: light !important;
}

html[data-succubus-ui-palette="light"] body,
body[data-succubus-ui-palette="light"],
html[data-succubus-theme-mode="night"] body,
body[data-succubus-theme-mode="night"] {
    background: #fff !important;
    background-color: #fff !important;
    color: #111 !important;
}

html[data-succubus-ui-palette="light"] #container,
html[data-succubus-ui-palette="light"] #contents,
html[data-succubus-ui-palette="light"] #footer.store-footer,
html[data-succubus-ui-palette="light"] .foot_functional-wrap,
html[data-succubus-ui-palette="light"] aside,
html[data-succubus-ui-palette="light"] #header_search_panel,
html[data-succubus-ui-palette="light"] [data-mypage-page],
html[data-succubus-ui-palette="light"] .succubus-wishlist,
html[data-succubus-ui-palette="light"] #order,
html[data-succubus-ui-palette="light"] .shopbrand,
html[data-succubus-ui-palette="light"] .product-detail,
html[data-succubus-theme-mode="night"] #container,
html[data-succubus-theme-mode="night"] #contents,
html[data-succubus-theme-mode="night"] #footer.store-footer,
html[data-succubus-theme-mode="night"] .foot_functional-wrap,
html[data-succubus-theme-mode="night"] aside,
html[data-succubus-theme-mode="night"] #header_search_panel,
html[data-succubus-theme-mode="night"] [data-mypage-page],
html[data-succubus-theme-mode="night"] .succubus-wishlist,
html[data-succubus-theme-mode="night"] #order,
html[data-succubus-theme-mode="night"] .shopbrand,
html[data-succubus-theme-mode="night"] .product-detail {
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    color: #111 !important;
    color-scheme: light !important;
}

html[data-succubus-ui-palette="light"] #order,
html[data-succubus-theme-mode="night"] #order {
    --order-page-bg: #f7f4f2 !important;
    --order-card: #fff !important;
    --order-card-soft: #fbf8f6 !important;
    --order-ink: #251a20 !important;
    --order-muted: #8c7e83 !important;
    --order-faint: #b7a9ae !important;
    --order-line: rgba(37, 26, 32, .12) !important;
    --order-line-strong: rgba(37, 26, 32, .24) !important;
    --order-control: #fff !important;
    --order-primary: #251a20 !important;
    --order-primary-ink: #fff !important;
}

html[data-succubus-ui-palette="light"] .mypage,
html[data-succubus-theme-mode="night"] .mypage {
    --mypage-bg: #fff !important;
    --mypage-surface: #f5f5f5 !important;
    --mypage-card: #fff !important;
    --mypage-ink: #111 !important;
    --mypage-muted: #777 !important;
    --mypage-soft: #b7b7b7 !important;
    --mypage-line: rgba(17, 17, 17, .14) !important;
    --mypage-accent: #111 !important;
    --mypage-accent-ink: #fff !important;
    background: #fff !important;
    color: #111 !important;
}

html[data-succubus-ui-palette="light"] .succubus-wishlist,
html[data-succubus-theme-mode="night"] .succubus-wishlist {
    --wish-bg: #fff !important;
    --wish-surface: #f6f4f4 !important;
    --wish-ink: #161316 !important;
    --wish-muted: #8b858a !important;
    --wish-line: rgba(22, 19, 22, .13) !important;
    background: #fff !important;
    color: #161316 !important;
}

html[data-succubus-ui-palette="light"] #footer.store-footer,
html[data-succubus-ui-palette="light"] .foot_functional-wrap,
html[data-succubus-theme-mode="night"] #footer.store-footer,
html[data-succubus-theme-mode="night"] .foot_functional-wrap {
    --footer-bg: #fff !important;
    --footer-panel: #fff !important;
    --footer-ink: #302526 !important;
    --footer-muted: #7d7070 !important;
    --footer-soft: #9b8c8d !important;
    --footer-line: rgba(48, 37, 38, .14) !important;
    --footer-active-bg: #302526 !important;
    --footer-active-ink: #fff !important;
    --footer-dot: #c78986 !important;
    background: #fff !important;
    color: #302526 !important;
}

/* 2026-09-17 account artwork edge cleanup
 *
 * The supplied account PNGs already contain their own rounded pill and have
 * transparent pixels outside that pill.  The menu-open first-item rule above
 * was painting a rectangular background behind the transparent corners of
 * the INFO artwork, which made the image look like it had not been cut out.
 * Leave the anchor transparent for every state and let the PNG be the only
 * visible button surface. */
aside#site-account-menu .user_m__account-actions a.user_m__account-action,
aside#site-account-menu .user_m__account-actions a.user_m__account-action:first-child,
html.succubus-menu-open #site-account-menu .user_m__account-actions a.user_m__account-action,
html.succubus-menu-open #site-account-menu .user_m__account-actions a.user_m__account-action:first-child,
body.succubus-menu-open #site-account-menu .user_m__account-actions a.user_m__account-action,
body.succubus-menu-open #site-account-menu .user_m__account-actions a.user_m__account-action:first-child {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* 2026-09-17 Malltail Global Shopping removal
 *
 * Makeshop injects the overseas-shopping widget as a shadow-DOM
 * <modal-widget> host after page load.  The widget is not part of the
 * SUCCUBUS storefront; hide the host globally from the shared Top CSS so it
 * cannot reappear on category, product, account, or homepage routes after a
 * delayed injection.  The legacy selectors are included for older cached
 * markup that used an ordinary element instead of the custom-element host. */
html modal-widget,
body modal-widget,
html .malltail-layer,
body .malltail-layer,
html #global-shopping-banner,
body #global-shopping-banner {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* 2026-09-19: NIGHT hero sheet parity source-order override. */
html[data-succubus-theme-mode="night"][data-mascot-mode="succubus"] body[data-succubus-theme-mode="night"][data-mascot-mode="succubus"] #sec1#sec1[data-home-hero-schedule] .home-hero-lower-ui {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: rgba(35, 23, 25, .16) 0 -16px 32px !important;
}
html[data-succubus-theme-mode="night"][data-mascot-mode="succubus"] body[data-succubus-theme-mode="night"][data-mascot-mode="succubus"] #sec1#sec1[data-home-hero-schedule] .home-hero-lower-ui::before,
html[data-succubus-theme-mode="night"][data-mascot-mode="succubus"] body[data-succubus-theme-mode="night"][data-mascot-mode="succubus"] #sec1#sec1[data-home-hero-schedule] .home-hero-lower-ui::after {
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
}


/* Wide storefront shell: keep the header actions inside the same 850px content frame without clipping. */
@media (min-width: 851px) {
  #header { width: 100%; max-width: none; }
  #header .head_inner { width: 100%; max-width: 850px; margin: 0 auto; }
  #header_search_panel { width: 100%; max-width: none; }
  #header_search_panel .header_search_panel__inner { width: 100%; max-width: 850px; margin: 0 auto; box-sizing: border-box; }
}

/* BASIC css end */