@charset "euc-kr";
/* ------------------------------------------------------------------
   ¹ÎÅ°Áî PC ¸®´º¾ó ½Ã¾È (New_26)
   ±âÁ¸ ȨÆäÀÌÁöÀÇ »öÀ» ±×´ë·Î °¡Á®¿Ô´Ù.
     #FFCC33  »ó´Ü ¸Þ´º ¶ì (ºê·£µå»ö)
     #454545  º»¹® ±ÛÀÚ      #778188  º¸Á¶ ±ÛÀÚ
     #F7F7F7  ¿¬ÇÑ ¹è°æ      #CCCCCC  ¼±
     #2266bb  °¡°Ý           #FF6600  ¸µÅ© hover
   ´Þ¶óÁø °ÍÀº ¹èÄ¡ ¹æ½Ä»ÓÀÌ´Ù. Ç¥(table) °íÁ¤Æø 795px ´ë½Å
   ÃÖ´ë 1200px ÄÁÅ×ÀÌ³Ê + flex/grid ·Î Â¥¼­ È­¸é Æø¿¡ ¸ÂÃç Á¢Èù´Ù.
   ------------------------------------------------------------------ */

:root{
	--brand:#FFCC33;
	--brand-dark:#EFB92A;
	--accent:#FF6600;
	--ink:#454545;
	--muted:#778188;
	--line:#DDE1E4;
	--line-soft:#EEF1F3;
	--soft:#F7F7F7;
	--price:#2266bb;
	--link:#6688CC;
	--wrap:1200px;
	--radius:10px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
	font-family:"Pretendard","¸¼Àº °íµñ","Malgun Gothic","µ¸¿ò",dotum,sans-serif;
	font-size:14px; line-height:1.55; color:var(--ink); background:#fff;
	-webkit-text-size-adjust:100%;
}
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--accent); }
img{ max-width:100%; border:0; vertical-align:middle; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 16px; }

/* ===== ½Ã¾È ¾È³» ¶ì ===== */
.demo-bar{
	background:#2D3142; color:#fff; font-size:12px; text-align:center;
	padding:7px 16px;
}
.demo-bar b{ color:var(--brand); }
.demo-bar a{ color:#fff; text-decoration:underline; }

/* ===== Çì´õ ===== */
.util{ background:var(--soft); border-bottom:1px solid var(--line-soft); font-size:12px; color:var(--muted); }
.util .wrap{ display:flex; align-items:center; gap:14px; height:34px; }
.util .sp{ margin-left:auto; }
.util a{ color:var(--muted); }
.util a:hover{ color:var(--accent); }

.head{ border-bottom:1px solid var(--line-soft); }
.head .wrap{ display:flex; align-items:center; gap:18px; padding-top:14px; padding-bottom:14px; }
.logo{ flex:0 0 auto; }
.logo img{ width:142px; height:56px; display:block; }

.hsearch{ flex:1; max-width:460px; }
.hsearch form{ display:flex; border:2px solid var(--brand); border-radius:999px; overflow:hidden; background:#fff; }
.hsearch input{
	flex:1; border:0; outline:0; padding:9px 16px; font-size:14px; min-width:0;
	font-family:inherit; color:var(--ink); background:transparent;
}
.hsearch button{
	border:0; background:var(--brand); color:#5A4400; font-weight:700;
	padding:0 18px; cursor:pointer; font-size:14px;
}
.hsearch button:hover{ background:var(--brand-dark); }

/* °Ë»ö⠾Ʒ¡ °Ë»ö¾î »óÀÚ(ÃÖ±Ù¡¤Àα⡤Ãßõ). ÀÚ¸®´Â inc/footer.php ÀÇ JS °¡ °Ë»ö Æû ¹Ù·Î ¾Æ·¡·Î Àâ´Â´Ù. */
.hsearch{ position:relative; }
.sh-pop{ position:absolute; z-index:700; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 28px rgba(30,33,40,.14); padding:6px 16px 10px; max-height:min(460px, calc(100vh - 140px)); overflow:auto; box-sizing:border-box; text-align:left; }
/* ¸Ó¸® °Ë»ö⠾ȿ¡ ³õÀ̹ǷΠ.hsearch button(³ë¶õ °Ë»ö ´ÜÃß) ²Ù¹ÒÀ» ¸ÕÀú Áö¿î´Ù. °°Àº ¹«°Ô¶ó µÚ¿¡ ÀÖ´Â ÀÌ ÁÙÀÌ À̱ä´Ù. */
.sh-pop button, .sh-pop button:hover{ background:none; color:var(--ink); font-weight:400; padding:0; border-radius:0; }
.sh-sec{ padding:10px 0 6px; }
.sh-sec+.sh-sec{ border-top:1px solid var(--line-soft); }
.sh-hd{ display:flex; align-items:baseline; gap:8px; margin-bottom:8px; font-size:13px; }
.sh-hd span{ color:var(--muted); font-size:12px; }
.sh-pop .sh-clr{ margin-left:auto; border:0; background:none; color:var(--muted); font-size:12px; cursor:pointer; padding:2px 4px; font-family:inherit; }
.sh-pop .sh-clr:hover{ color:var(--ink); text-decoration:underline; }
.sh-none{ margin:0 0 4px; color:var(--muted); font-size:12.5px; }
.sh-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.sh-chip{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; background:#fff; max-width:100%; }
.sh-pop .sh-chips>.sh-kw, .sh-pop .sh-chip .sh-kw{ border:0; background:none; padding:5px 4px 5px 12px; font-size:13px; color:var(--ink); cursor:pointer; font-family:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
.sh-pop .sh-chips>.sh-kw{ border:1px solid var(--line); border-radius:999px; padding:5px 12px; }
.sh-pop .sh-chips>.sh-kw:hover, .sh-chip:hover{ border-color:var(--brand); }
.sh-pop .sh-x{ border:0; background:none; color:var(--muted); cursor:pointer; padding:4px 10px 4px 6px; font-size:14px; line-height:1; font-family:inherit; }
.sh-pop .sh-x:hover{ color:#C4322F; }
.sh-rank{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:repeat(5, auto); grid-auto-flow:column; gap:2px 16px; }
.sh-pop .sh-rank .sh-kw{ display:flex; gap:8px; width:100%; border:0; background:none; padding:5px 4px; font-size:13px; color:var(--ink); cursor:pointer; text-align:left; font-family:inherit; border-radius:6px; }
.sh-pop .sh-rank .sh-kw:hover{ background:var(--soft); }
.sh-rank em{ font-style:normal; font-weight:800; color:var(--accent); min-width:16px; text-align:right; font-variant-numeric:tabular-nums; }
.sh-rank .t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.sh-pop button:focus-visible{ outline:2px solid var(--brand); outline-offset:1px; }
@media (max-width:480px){ .sh-rank{ grid-template-columns:minmax(0,1fr); grid-template-rows:none; grid-auto-flow:row; } }

/* À§½Ã¸®½ºÆ® ¡¤ Àå¹Ù±¸´Ï ¡¤ ¸¶ÀÌÆäÀÌÁö : ¸ð¹ÙÀÏ°ú °°Àº µ¿±×¶õ ¾ÆÀÌÄÜ ´ÜÃß.
   ±ÛÀÚ¸¦ ¾ø¾Ø ´ë½Å ÆøÀÌ ÀÏÁ¤ÇØÁ®¼­ ·Î°í¡¤°Ë»öÄ­°ú ÁÙÀÌ Àß ¸Â´Â´Ù. */
/* Àå¹Ù±¸´Ï¡¤À§½Ã¸®½ºÆ® ´ÜÃß: ±âº»Àº ¸Ó¸® ÀÚ¸®¿¡ ±×´ë·Î(½ºÅ©·ÑÇÏ¸é °°ÀÌ ¿Ã¶ó°¨).
   ´ã±â ´ÜÃß°¡ ÀÖ´Â È­¸é¿¡¼­¸¸ .float ÀÌ ºÙ¾î È­¸é¿¡ ºÙ¾î µû¶ó¿Â´Ù - ºÙÀÌ´Â °÷Àº inc/footer.php (2026-10-11) */
.hicons{ display:flex; align-items:center; gap:10px; margin-left:auto; position:absolute; top:58px; right:max(16px, calc((100vw - var(--wrap)) / 2 + 16px)); z-index:600; }
.hicons.float{ position:fixed; }
.hicon{
	position:relative; display:inline-flex; align-items:center; justify-content:center;
	width:40px; height:40px; flex:0 0 40px; border-radius:50%;
	border:1px solid var(--line); background:#fff; box-shadow:0 2px 6px rgba(45,49,66,.10);
}
.hicon svg{ width:21px; height:21px; display:block; }
.hicon .cartamt{ display:inline-flex; align-items:center; justify-content:center; color:#2B8A3E; font-weight:800; line-height:1; letter-spacing:-.3px; white-space:nowrap; }
.hicon .cartamt[hidden]{ display:none; }
.hicon:hover{ border-color:var(--brand-dark); box-shadow:0 3px 10px rgba(45,49,66,.18); }
.hicon .badge{
	position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 4px;
	border-radius:999px; background:var(--accent); color:#fff;
	font-size:10.5px; font-weight:700; line-height:18px; text-align:center;
	box-shadow:0 0 0 2px #fff;
}
.burger{ display:none; border:1px solid var(--line); background:#fff; border-radius:8px; width:40px; height:36px; cursor:pointer; }
.burger span{ display:block; width:18px; height:2px; background:var(--ink); margin:3px auto; }

/* ===== ÁÖ¸Þ´º ===== */
.gnb{ background:var(--brand); }
.gnb .wrap{ display:flex; flex-wrap:wrap; gap:2px; }
.gnb a{
	display:block; padding:12px 18px; font-size:14.5px; font-weight:700; color:#4A3A00;
	border-radius:8px 8px 0 0;
}
.gnb a:hover{ background:rgba(255,255,255,.45); color:#3A2D00; }
.gnb a.on{ background:#fff; color:#2D3142; }

/* ===== º»¹® ===== */
main{ padding:22px 0 48px; }
.page-title{ font-size:20px; font-weight:800; margin:0 0 4px; }
.crumb{ font-size:12px; color:var(--muted); margin-bottom:16px; }
.crumb b{ color:var(--ink); }

.panel{ border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-bottom:16px; background:#fff; }
.panel h2{ font-size:14px; margin:0 0 10px; }

.filters{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.filters select{
	font-size:13px; padding:8px 10px; border:1px solid var(--line); border-radius:8px;
	background:#fff; color:var(--ink); font-family:inherit; min-width:120px;
}
.filters .right{ margin-left:auto; display:flex; gap:14px; align-items:center; font-size:13px; }
.filters label{ cursor:pointer; display:inline-flex; align-items:center; gap:5px; }

.countbar{ font-size:13.5px; margin:0 0 12px; color:var(--muted); }
.countbar b{ color:var(--ink); font-size:15px; }

/* ===== »óÇ° ±×¸®µå ===== */
.goods{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:18px; }
.card{ border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.card:hover{ border-color:var(--brand); box-shadow:0 4px 14px rgba(0,0,0,.07); }
.card .thumb{ position:relative; display:block; background:var(--soft); text-align:center; padding:16px 10px; }
.card .thumb img{ max-height:170px; width:auto; }
.card .body{ padding:12px 13px 14px; display:flex; flex-direction:column; gap:7px; flex:1; }
.card .tags{ display:flex; flex-wrap:wrap; gap:4px; }
.tag{ font-size:11px; font-weight:700; border-radius:999px; padding:2px 8px; }
.tag-lv{ background:#FDECF3; color:#E0457B; }
.tag-best{ background:linear-gradient(135deg,#FFB347,#F5A623); color:#fff; }
.tag-out{ background:#E5484D; color:#fff; }
.tag-seen{ background:#EAF2FF; color:#2E6FE0; }
.tag-seen.read{ background:#2E6FE0; color:#fff; }
.thumb-seen{ position:absolute; top:3px; left:3px; background:#E5484D; color:#fff; font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.18); line-height:1.3; }
.thumb-seen.read{ background:#2E6FE0; }
/* 2026-10-11 Ã¥ÄûÁî°¡ Àִ å : Ç¥Áö ¿À¸¥ÂÊ À§ 'ÄûÁî' ¶ì (function/mk_quiz_badge.php). '±â´ë¿©¡¤ÀÐÀºµµ¼­'(.thumb-seen)´Â ¿ÞÂÊ À§ */
.thumb-quiz{ position:absolute; top:3px; right:3px; display:inline-flex; align-items:center; gap:3px; background:var(--brand); color:#4A3A00; font-size:11px; font-weight:800; padding:3px 9px 3px 7px; border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.18); line-height:1.3; pointer-events:none; }
.thumb-quiz svg{ width:11px; height:11px; display:block; }
.dimg{ position:relative; }
.dimg .thumb-quiz{ top:12px; right:12px; font-size:13px; padding:5px 13px 5px 10px; gap:4px; }
.dimg .thumb-quiz svg{ width:13px; height:13px; }
.card .info{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.card .name{ font-size:13.5px; line-height:1.45; color:var(--ink); display:block; }
.card .name:hover{ color:var(--accent); text-decoration:underline; }
/* ÀÛ°¡ : Á¦¸ñ ¹Ù·Î ¹Ø¿¡ ÇÑ ÁÙ. ±æ¸é À߶ó µÐ´Ù */
.card .who{
	margin-top:4px; font-size:11.5px; color:var(--muted); line-height:1.4;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.card .price{ font-size:13px; font-weight:700; color:var(--price); margin-top:auto; }
.card .price span{ color:var(--muted); font-weight:400; font-size:12px; }
.card .btns{ display:flex; gap:6px; }
/* ´ë¿©ÁßÀΠåÀº ´ë¿©Çϱâ ÀÚ¸®¿¡ ºÓÀº '´ë¿©Áß' À» µÐ´Ù (´©¸¦ ¼ö ¾ø´Ù) */
.card .btns .main.out{
	flex:1; text-align:center; font-size:12px; font-weight:700; padding:7px 0; border-radius:8px;
	background:#FFF1EF; border:1px solid #F0C8C4; color:#D0392A; cursor:default;
}
.card .btns a{
	flex:1; text-align:center; font-size:12px; font-weight:700; padding:7px 0; border-radius:8px;
	border:1px solid var(--line); color:var(--ink); background:#fff;
}
.card .btns a.main{ background:var(--brand); border-color:var(--brand); color:#4A3A00; }
.card .btns a.main:hover{ background:var(--brand-dark); color:#3A2D00; }
.card .btns a:hover{ border-color:var(--brand); }

/* --- °¡·ÎÁÙ º¸±â : °°Àº ¸¶Å©¾÷À» ¹æÇ⸸ ¹Ù²ã¼­ ¾´´Ù --- */
.goods.row{ display:flex; flex-direction:column; gap:10px; }
.goods.row .card{ flex-direction:row; align-items:stretch; }
.goods.row .card .thumb{ flex:0 0 120px; width:120px; padding:10px; display:flex; align-items:center; justify-content:center; }
.goods.row .card .thumb img{ max-height:104px; }
.goods.row .card .body{ flex-direction:row; align-items:center; gap:18px; padding:12px 16px; }
.goods.row .card .info{ flex:1; }
.goods.row .card .price{ margin-top:0; flex:0 0 120px; text-align:right; font-size:14px; }
.goods.row .card .btns{ flex:0 0 160px; }

/* °í¸£±â Ĩ (ÁÖÁ¦ ¡¤ ARÁÖÁ¦ ¡¤ ÀÛ°¡) */
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chips.sub{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }
.chip{
	display:inline-block; padding:6px 12px; border:1px solid var(--line); border-radius:999px;
	font-size:12.5px; color:var(--ink); background:#fff;
}
.chip small{ color:var(--muted); font-size:11px; }
.chip:hover{ border-color:var(--brand); background:#FFFBF0; color:var(--accent); }
.chip.on{ background:var(--brand); border-color:var(--brand); color:#4A3A00; font-weight:700; }
.chip.on small{ color:#6B5500; }

/* À½¿ø Ç¥½Ã´Â À¯Æ©ºê ·Î°í¶ó ¹ÙÅÁ»ö ¾øÀÌ ±×¸²¸¸ ³õ´Â´Ù */
.tag-yt{ background:none; padding:0; display:inline-flex; align-items:center; }
.tag-yt svg{ display:block; }

/* °Ë»ö ÀÔ·ÂÄ­ */
.searchbox{ display:flex; gap:8px; }
.searchbox+.searchbox{ margin-top:8px; }
.searchbox input{
	flex:1; min-width:0; border:1px solid var(--line); border-radius:8px;
	padding:10px 14px; font-size:14px; font-family:inherit; color:var(--ink);
}
.searchbox input:focus{ outline:none; border-color:var(--brand); }
.searchbox button{
	border:0; background:var(--brand); color:#4A3A00; font-weight:700;
	padding:0 22px; border-radius:8px; cursor:pointer; font-size:14px; white-space:nowrap;
}
.searchbox button:hover{ background:var(--brand-dark); }
.searchbox button.ghost{ background:#fff; border:1px solid var(--line); color:var(--muted); font-weight:400; }
.searchbox button.ghost:hover{ border-color:var(--brand); color:var(--accent); background:#fff; }
.searchbox.sub input{ background:var(--soft); }

/* ¸ÂÃãµµ¼­ ¿ä¾à */
.mb-sum{ background:#FFF9E8; border:1px solid #F6E3AE; border-radius:var(--radius); padding:14px 16px; margin-bottom:16px; }
.mb-sum .cnt{ font-size:15px; font-weight:800; color:#8A6A00; }
.hero-cta-sm{
	display:inline-block; background:var(--brand); color:#4A3A00; font-weight:700;
	padding:8px 18px; border-radius:999px; font-size:13px;
}
.hero-cta-sm:hover{ background:var(--brand-dark); color:#3A2D00; }

/* Ã¥ °ñ¶óÁֱ⠴ëÈ­ ÆгΠ*/
.mk-botpanel{ position:fixed; top:0; right:0; bottom:0; width:400px; max-width:100%; z-index:9001; background:#FBF7F3; box-shadow:-8px 0 28px rgba(0,0,0,.18); display:none; }
.mk-botpanel.on{ display:block; }
.mk-botpanel iframe{ width:100%; height:100%; border:0; display:block; }
/* 2026-10-11 ¸ðµç È­¸é ¿À¸¥ÂÊ ¾Æ·¡ 'Ã¥ Ãßõ' ¶° ÀÖ´Â ´ÜÃß(inc/footer.php). â(.mk-botpanel, z 9001)ÀÌ ¿­¸®¸é ±× ¹Ø¿¡ °¡·ÁÁø´Ù. */
.mk-botfab{ position:fixed; right:24px; bottom:24px; z-index:9000; width:66px; height:66px; padding:0; border:0; border-radius:50%; background:linear-gradient(135deg,#FF9A3C,#FF6A00); color:#fff; box-shadow:0 6px 18px rgba(255,106,0,.35); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-family:inherit; font-size:11.5px; font-weight:800; letter-spacing:-.2px; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; }
.mk-botfab:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(255,106,0,.42); }
.mk-botfab:focus-visible{ outline:3px solid #4A3A00; outline-offset:3px; }
@media (max-width:640px){ .mk-botfab{ right:14px; bottom:14px; width:58px; height:58px; font-size:10.5px; } }
@media print{ .mk-botfab, .mk-botpanel{ display:none !important; } }
@media (prefers-reduced-motion: reduce){ .mk-botfab{ transition:none; } }

/* º¸±â ¹æ½Ä Àüȯ ¹öÆ° */
.viewsw{ display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.viewsw a{ padding:7px 12px; font-size:12.5px; font-weight:700; color:var(--muted); background:#fff; }
.viewsw a+a{ border-left:1px solid var(--line); }
.viewsw a.on{ background:var(--brand); color:#4A3A00; }
.viewsw a:hover{ color:var(--accent); }

.empty{ padding:60px 0; text-align:center; color:var(--muted); }

/* ===== ÆäÀÌÁö ³Ñ±è ===== */
.pager{ display:flex; justify-content:center; align-items:center; gap:6px; flex-wrap:wrap; padding:28px 0 0; }
.pager a,.pager strong{
	min-width:36px; height:36px; line-height:34px; text-align:center; padding:0 10px;
	border:1px solid var(--line); border-radius:8px; font-size:13px; color:var(--ink);
}
.pager strong{ background:var(--brand); border-color:var(--brand); color:#4A3A00; }
.pager a:hover{ border-color:var(--brand); color:var(--accent); }

/* ===== »ó¼¼ ===== */
.detail{ display:flex; gap:34px; align-items:flex-start; flex-wrap:wrap; }
.dimg{
	flex:0 0 320px; max-width:320px; background:var(--soft); border:1px solid var(--line-soft);
	border-radius:var(--radius); padding:22px; text-align:center;
}
.dimg img{ max-width:100%; height:auto; }
.dinfo{ flex:1 1 380px; min-width:0; }
.dname{ font-size:22px; line-height:1.4; margin:10px 0 14px; }
.dprice{ font-size:26px; font-weight:800; color:var(--price); margin-bottom:18px; }
.dprice span{ font-size:14px; font-weight:400; color:var(--muted); margin-left:2px; }

.dmeta{ margin:0 0 22px; border-top:1px solid var(--line); }
.dmeta dt{
	float:left; clear:left; width:88px; padding:11px 0; font-size:13px; color:var(--muted);
}
.dmeta dd{ margin:0 0 0 88px; padding:11px 0; font-size:13.5px; border-bottom:1px solid var(--line-soft); }
.dmeta dd.pills{ display:flex; flex-wrap:wrap; gap:5px; padding:8px 0; }
.pill{ display:inline-block; padding:4px 11px; border-radius:999px; font-size:12px; border:1px solid #333; color:#333; background:#fff; }
.pill:hover{ background:#333; color:#fff; }
.pill.pink{ background:#FDECF3; border-color:#F6CEDF; color:#E0457B; }
.pill.pink:hover{ background:#E0457B; color:#fff; }
.pill.blue{ background:#E7F1FC; border-color:#C9DEF5; color:#1F6FB5; }
.pill.blue:hover{ background:#1F6FB5; color:#fff; }

.dbtns{ display:flex; flex-wrap:wrap; gap:8px; }
.dbtns a,.dbtns span{ display:inline-block; padding:13px 26px; border-radius:10px; font-size:15px; font-weight:700; }
.btn-main{ background:var(--brand); color:#4A3A00; }
.btn-main:hover{ background:var(--brand-dark); color:#3A2D00; }
.btn-sub{ border:1px solid var(--line); color:var(--ink); background:#fff; }
.btn-sub:hover{ border-color:var(--brand); color:var(--accent); }
/* À½¿ø ¹öÆ°Àº À¯Æ©ºê ·Î°í¸¸ ³Ö´Â´Ù. ±ÛÀÚ°¡ ¾øÀ¸¹Ç·Î ÁÂ¿ì ¿©¹éÀ» ÁÙÀÌ°í ³ôÀ̸¦ ¸ÂÃá´Ù. */
.btn-yt{ border:1px solid var(--line); background:#fff; padding:10px 20px; display:inline-flex; align-items:center; }
.btn-yt svg{ display:block; }
.btn-yt:hover{ border-color:#FF0000; background:#FFF5F4; }
.btn-off{ background:var(--soft); color:var(--muted); }
.btn-sub.done{ background:#EAF2FF; border-color:#2E6FE0; color:#2E6FE0; }
.btn-sub.done:hover{ background:#EAF2FF; border-color:#2E6FE0; color:#2E6FE0; }
.read-msg{ margin-top:10px; padding:10px 14px; border-radius:10px; background:#E6F7F1; color:#1B8A6B; font-size:13px; font-weight:700; display:inline-block; }
.read-msg[hidden]{ display:none; }
.dnote{ margin-top:16px; font-size:12.5px; color:var(--muted); background:var(--soft); border-radius:8px; padding:11px 14px; }
.tag-cd{ background:#EDE7F6; color:#5E35B1; }

/* »ó¼¼ : ·¹º§ ÁöÇ¥ ¡¤ »óÇ°Á¤º¸ ¡¤ ¸®ºä ¡¤ ³»Áö ¡¤ »óÇ°Æò */
.rl{ font-size:13px; line-height:2.1; color:var(--ink); }
.rl .rli b{ color:#2D3142; }
.rl .sep{ color:var(--accent); margin:0 7px; }
.gpoints{ margin:12px 0 0; padding:0; }
.gpoints li{ list-style:none; font-size:13.5px; padding:5px 0 5px 16px; position:relative; }
.gpoints li:before{ content:''; position:absolute; left:2px; top:12px; width:5px; height:5px; border-radius:50%; background:var(--brand); }
.rlwho{ margin-top:12px; padding-top:10px; border-top:1px dashed var(--line); font-size:13px; display:flex; gap:18px; flex-wrap:wrap; color:var(--muted); }
.rlwho b{ color:var(--ink); }

.review{ font-size:13.5px; line-height:1.95; color:#3A4148; word-break:keep-all; }

.ytbox{ position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:var(--radius); }
.ytbox iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; }

.spimg{ display:flex; flex-direction:column; gap:14px; align-items:center; }
.spimg img{ max-width:100%; height:auto; border-radius:8px; }

.judge{ border-top:1px solid var(--line-soft); padding:14px 0; }
.judge:first-of-type{ border-top:0; }
.judge .jh{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.judge .jh b{ font-size:13.5px; }
.judge .jstar{ color:#F5A623; font-size:13px; letter-spacing:1px; }
.judge .jm{ font-size:12px; color:var(--muted); margin-left:auto; }
.judge .jc{ font-size:13px; line-height:1.8; color:#3A4148; }

@media (max-width:760px){
	.detail{ gap:20px; }
	.dimg{ flex:1 1 100%; max-width:none; padding:18px; }
	.dname{ font-size:19px; }
	.dprice{ font-size:22px; }
	.dbtns a,.dbtns span{ flex:1 1 auto; text-align:center; padding:13px 16px; }
}

/* ===== Àå¹Ù±¸´Ï ¡¤ À§½Ã¸®½ºÆ® ===== */
.cart-note{ background:#FFF9E8; border:1px solid #F6E3AE; border-radius:var(--radius); padding:12px 15px; font-size:13px; color:#7A5E00; margin-bottom:14px; }
.cart{ border-top:1px solid var(--line); }
.cart-row{ display:flex; align-items:center; gap:14px; padding:14px 4px; border-bottom:1px solid var(--line-soft); }
.cart-row .cc{ flex:0 0 22px; }
.cart-row .cc input{ width:17px; height:17px; }
.cart-row .ci{ position:relative; flex:0 0 66px; width:66px; text-align:center; }
.cart-row .thumb-seen{ top:-6px; left:-6px; font-size:9.5px; padding:2px 7px; }
.cart-row .thumb-quiz{ top:-6px; right:-6px; font-size:9.5px; padding:2px 7px 2px 5px; }
.cart-row .thumb-quiz svg{ width:9px; height:9px; }
.cn-row{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; min-width:0; }
.seen-mark{ display:inline-block; flex:0 0 auto; padding:2px 7px; border-radius:999px; background:#FFE3E1; color:#C42B22; font-size:9.5px; font-weight:800; line-height:1.3; vertical-align:middle; }
.seen-mark.read{ background:#DCE9FF; color:#2E6FE0; }
.cart-row .ci img{ max-width:100%; max-height:76px; }
.cart-row .cb{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.cart-row .cn{ font-size:13.5px; color:var(--ink); }
.cart-row .cn:hover{ color:var(--accent); text-decoration:underline; }
.cart-row .cu{ font-size:12px; color:var(--muted); }
.cart-row .cq{ flex:0 0 120px; display:flex; gap:4px; }
.cart-row .cq input{ width:52px; border:1px solid var(--line); border-radius:6px; padding:6px 8px; font-size:13px; text-align:center; font-family:inherit; }
.cart-row .cq button{ border:1px solid var(--line); background:#fff; border-radius:6px; padding:0 10px; font-size:12px; cursor:pointer; color:var(--ink); }
.cart-row .cq button:hover{ border-color:var(--brand); color:var(--accent); }
.cart-row .cs{ flex:0 0 100px; text-align:right; font-size:14px; font-weight:700; color:var(--price); }
.cart-row .cw{ flex:0 0 80px; text-align:right; }
.cart-row .cd{ flex:0 0 46px; text-align:center; font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:6px 0; }
.cart-row .cd:hover{ border-color:#E5484D; color:#E5484D; }

.cart-total{ display:flex; align-items:center; justify-content:flex-end; gap:14px; padding:16px 4px; font-size:15px; }
.cart-total b{ font-size:22px; font-weight:800; color:var(--price); }

.plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; }
.plan{ border:1px solid var(--line); border-radius:var(--radius); padding:14px 10px; text-align:center; }
.plan.on{ border-color:var(--brand); background:#FFFBF0; }
.plan .pd{ font-size:13px; color:var(--muted); margin-bottom:5px; }
.plan .pa{ font-size:17px; font-weight:800; color:var(--price); }
.plan .pa.off{ color:#D0392A; font-size:14px; }
.plan .ps{ font-size:11.5px; color:var(--muted); margin-top:4px; }
.plan-note{ margin-top:10px; font-size:12.5px; color:var(--muted); }

.panel.notice{ background:var(--soft); font-size:12.5px; color:var(--muted); line-height:2; }
.panel.notice b{ color:var(--ink); }

.cart-btns{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin-top:18px; }
.cart-btns a{ display:inline-block; padding:13px 26px; border-radius:10px; font-size:15px; font-weight:700; }
.cart-btns .btn-sub.danger{ color:#D0392A; border-color:#F0C8C4; }
.cart-btns .btn-sub.danger:hover{ background:#D0392A; color:#fff; border-color:#D0392A; }

.wish-head{ display:flex; align-items:center; gap:8px; padding:12px 4px; border-bottom:1px solid var(--line); font-size:13px; }
.wish-head .sp{ margin-left:auto; }
.wish-head label{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.btn-main.sm,.btn-sub.sm,.btn-off.sm{ padding:8px 16px; font-size:13px; font-weight:700; border-radius:8px; display:inline-block; cursor:pointer; }
.btn-main.sm{ background:var(--brand); color:#4A3A00; border:0; }
.btn-main.sm:hover{ background:var(--brand-dark); }
.btn-sub.sm{ background:#fff; border:1px solid var(--line); color:var(--ink); }
.btn-sub.sm:hover{ border-color:var(--brand); color:var(--accent); }
.btn-sub.sm.danger{ color:#D0392A; border-color:#F0C8C4; }
.btn-off.sm{ background:var(--soft); color:var(--muted); }

@media (max-width:720px){
	.cart-row{ flex-wrap:wrap; gap:10px; }
	.cart-row .cb{ flex:1 1 calc(100% - 90px); }
	.cart-row .cq{ flex:0 0 auto; order:5; }
	.cart-row .cs{ flex:1 1 auto; order:6; text-align:left; }
	.cart-row .cd,.cart-row .cw{ flex:0 0 auto; order:7; }
	.cart-btns a{ flex:1 1 auto; text-align:center; padding:13px 10px; }
	.wish-head{ flex-wrap:wrap; }
	.wish-head .sp{ flex:1 0 100%; margin:0; }
}

/* ===== Ȩ ===== */
.hero{
	background:linear-gradient(135deg,#FFE9A8,#FFCC33);
	border-radius:16px; padding:34px 28px; margin-bottom:26px;
	display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.hero h1{ margin:0 0 8px; font-size:26px; color:#4A3A00; line-height:1.35; }
.hero p{ margin:0; color:#6B5500; font-size:14.5px; }
.hero .cta{
	display:inline-block; margin-top:16px; background:#fff; color:#4A3A00;
	font-weight:800; padding:11px 22px; border-radius:999px; font-size:14px;
}
.hero .cta:hover{ background:#4A3A00; color:#fff; }
/* 2026-10-11 ¸ÞÀÎ ¹è³Ê(¿Á¼Ç½Ä) - ¿ÞÂÊ ¹Ù·Î°¡±â ¸Þ´º + ¿À¸¥ÂÊ Å« ¹è³Ê 1Àå(±×¸²Àº 3:2 Åë°·Î, ¾ç¿·Àº °°Àº ±×¸² È帮°Ô) + Á¦¸ñ ÅÇ */
.hb-h1{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.hero-banners{ display:flex; gap:16px; align-items:stretch; margin-bottom:30px; }
/* 2026-10-11 Ȩ °øÁö ÇÑ ÁÙ(¹è³Ê À§) */
.nt-bar{ display:flex; align-items:center; gap:12px; margin:-6px 0 14px; padding:0 16px; height:44px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.nt-label{ flex-shrink:0; display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; background:#FFF3CC; color:#8A6A00; font-size:12.5px; font-weight:800; }
.nt-items{ position:relative; flex:1 1 auto; min-width:0; height:100%; }
.nt-item{ position:absolute; inset:0; display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease, visibility .35s; }
.nt-item.on{ opacity:1; visibility:visible; transform:none; }
.nt-item:hover .nt-t{ text-decoration:underline; }
.nt-item:focus-visible{ outline:2px solid #4A3A00; outline-offset:-2px; border-radius:6px; }
.nt-t{ min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14.5px; font-weight:700; }
.nt-d{ flex-shrink:0; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.nt-cnt{ flex-shrink:0; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.nt-all{ flex-shrink:0; font-size:13px; font-weight:600; color:var(--muted); text-decoration:none; }
.nt-all:hover{ color:var(--ink); }
@media (prefers-reduced-motion: reduce){ .nt-item{ transition:none; } }
@media (max-width:640px){ .nt-bar{ gap:8px; padding:0 12px; } .nt-d, .nt-cnt{ display:none; } .nt-t{ font-size:13.5px; } }
.hb-menu{ flex:0 0 224px; display:flex; flex-direction:column; gap:8px; }
.hb-menu a{ flex:1 1 0; min-height:46px; display:flex; align-items:center; gap:10px; padding:0 14px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); font-size:15px; font-weight:700; text-decoration:none; transition:border-color .15s ease, background .15s ease; }
.hb-menu a:hover{ border-color:var(--brand-dark); background:#FFF8E1; }
.hb-menu a:focus-visible{ outline:2px solid #4A3A00; outline-offset:2px; }
.hb-menu .hm-ic{ flex:0 0 32px; height:32px; border-radius:50%; background:#FFF3CC; color:#8A6A00; display:flex; align-items:center; justify-content:center; }
.hb-menu .hm-go{ margin-left:auto; font-size:20px; line-height:1; color:#B8BEC3; }
.hb-menu .hm-t{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hb-menu a.hm-main{ background:var(--brand); border-color:var(--brand); color:#4A3A00; }
.hb-menu a.hm-main:hover{ background:var(--brand-dark); border-color:var(--brand-dark); }
.hb-menu a.hm-main .hm-ic{ background:rgba(255,255,255,.6); color:#4A3A00; }
.hb-menu a.hm-main .hm-go{ color:#4A3A00; }
.hb-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; }
.hb-stage{ position:relative; height:360px; overflow:hidden; background:#F7F1E6; }
.hb-slide{ position:absolute; inset:0; display:block; opacity:0; visibility:hidden; transition:opacity .6s ease, visibility .6s; overflow:hidden; }
.hb-slide.on{ opacity:1; visibility:visible; z-index:1; }
.hb-bg{ position:absolute; inset:-40px; background-size:cover; background-position:center; filter:blur(26px) saturate(1.15); opacity:.85; }
.hb-slide img{ position:relative; display:block; height:100%; width:auto; max-width:100%; margin:0 auto; object-fit:contain; box-shadow:0 0 28px rgba(0,0,0,.14); }
.hb-arrow{ position:absolute; top:50%; z-index:2; width:40px; height:40px; margin-top:-20px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.88); color:#333; box-shadow:0 2px 8px rgba(0,0,0,.18); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.hb-arrow:hover{ background:#fff; }
.hb-arrow.prev{ left:14px; }
.hb-arrow.next{ right:14px; }
.hb-pause{ position:absolute; right:12px; bottom:12px; z-index:2; width:30px; height:30px; padding:0; border:0; border-radius:50%; background:rgba(40,36,30,.55); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.hb-arrow:focus-visible, .hb-pause:focus-visible{ outline:2px solid #4A3A00; outline-offset:2px; }
.hb-tabs{ display:flex; border-top:1px solid var(--line); background:#fff; }
.hb-tab{ position:relative; flex:1 1 0; padding:13px 6px; border:0; background:none; font-family:inherit; font-size:14px; font-weight:600; color:var(--muted); cursor:pointer; }
.hb-tab + .hb-tab::before{ content:''; position:absolute; left:0; top:15px; bottom:15px; width:1px; background:var(--line); }
.hb-tab:hover{ color:var(--ink); }
.hb-tab.on{ color:#4A3A00; font-weight:800; }
.hb-tab.on::after{ content:''; position:absolute; left:18%; right:18%; bottom:0; height:3px; border-radius:3px 3px 0 0; background:var(--brand-dark); }
.hb-tab:focus-visible{ outline:2px solid #4A3A00; outline-offset:-3px; }
@media (prefers-reduced-motion: reduce){ .hb-slide, .hb-menu a{ transition:none; } }
@media (max-width:1024px){ .hb-menu{ flex-basis:190px; } .hb-menu a{ font-size:14px; gap:8px; padding:0 10px; } .hb-stage{ height:300px; } }
@media (max-width:860px){
	.hero-banners{ flex-direction:column; }
	.hb-menu{ order:2; flex:none; display:grid; grid-template-columns:1fr 1fr; }
	.hb-menu a{ min-height:50px; }
	.hb-menu a:last-child:nth-child(odd){ grid-column:1 / -1; }
	.hb-stage{ height:auto; aspect-ratio:3 / 2; }
	.hb-bg{ display:none; }
	.hb-arrow{ width:32px; height:32px; margin-top:-16px; }
	.hb-arrow.prev{ left:8px; }
	.hb-arrow.next{ right:8px; }
	.hb-tab{ font-size:13px; padding:11px 2px; }
}
@media (max-width:640px){ .hb-arrow{ display:none; } }

.quick{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:12px; margin-bottom:28px; }
.quick a{
	border:1px solid var(--line); border-radius:var(--radius); padding:18px 14px; text-align:center;
	font-weight:700; font-size:14px; background:#fff;
}
.quick a:hover{ border-color:var(--brand); background:#FFFBF0; color:var(--accent); }
.quick a small{ display:block; font-weight:400; font-size:11.5px; color:var(--muted); margin-top:4px; }

.sec-head{ display:flex; align-items:baseline; gap:10px; margin:0 0 14px; }
.sec-head h2{ font-size:18px; margin:0; }
.sec-head a{ margin-left:auto; font-size:12.5px; color:var(--muted); }

/* ===== ·Î±×ÀÎ ===== */
.loginbox{ max-width:420px; margin:10px auto 40px; }
.loginbox .lf{ display:block; margin-bottom:12px; }
.loginbox .lf span{ display:block; font-size:12.5px; color:var(--muted); margin-bottom:5px; }
.loginbox .lf input{
	width:100%; border:1px solid var(--line); border-radius:8px; padding:12px 14px;
	font-size:15px; font-family:inherit; color:var(--ink);
}
.loginbox .lf input:focus{ outline:none; border-color:var(--brand); }
.loginbox .lbtn{
	width:100%; border:0; background:var(--brand); color:#4A3A00; font-weight:800;
	font-size:16px; padding:14px 0; border-radius:10px; cursor:pointer; margin-top:6px; font-family:inherit;
}
.loginbox .lbtn:hover{ background:var(--brand-dark); }
.loginbox .lhelp{ text-align:center; margin-top:14px; font-size:12.5px; color:var(--muted); }
.loginbox .lhelp a{ color:var(--muted); }
.loginbox .lhelp a:hover{ color:var(--accent); }
.loginbox .lhelp span{ margin:0 8px; color:var(--line); }
.loginbox .ljoin{
	margin-top:22px; padding-top:18px; border-top:1px solid var(--line-soft);
	text-align:center; font-size:13px; color:var(--muted);
}
.loginbox .ljoin a{ color:var(--price); font-weight:700; margin-left:8px; }

/* ===== ¸¶ÀÌÆäÀÌÁö ¡¤ ÁÖ¹®Á¶È¸ ===== */
.mp-hello{ font-size:17px; margin-bottom:16px; }
.mp-hello b{ font-size:20px; }
.mp-hello .mp-id{ font-size:12.5px; color:var(--muted); margin-left:8px; }
.mp-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-bottom:16px; }
.mpc{ border:1px solid var(--line); border-radius:var(--radius); padding:18px 12px; text-align:center; background:#fff; }
.mpc:hover{ border-color:var(--brand); background:#FFFBF0; }
.mpc .n{ display:block; font-size:24px; font-weight:800; color:var(--price); }
.mpc .l{ display:block; font-size:12.5px; color:var(--muted); margin-top:4px; }
.mpc:hover .l{ color:var(--accent); }
.mp-links{ display:flex; flex-wrap:wrap; gap:8px; }
.mp-links a{ border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-size:13px; background:#fff; }
.mp-links a:hover{ border-color:var(--brand); color:var(--accent); }

.rentlist{ border-top:1px solid var(--line-soft); }
.rl-row{ display:flex; align-items:center; gap:12px; padding:10px 2px; border-bottom:1px solid var(--line-soft); font-size:13.5px; }
.rl-row .rn{ flex:1; min-width:0; }
.rl-row .rn:hover{ color:var(--accent); text-decoration:underline; }
.rl-row .rd{ flex:0 0 auto; font-size:12.5px; color:var(--muted); white-space:nowrap; }
.rl-row .rd.soon{ color:#D0392A; font-weight:700; }

.orders{ border-top:1px solid var(--line); }
.order{ border-bottom:1px solid var(--line-soft); padding:14px 2px; }
.order .oh{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); }
.order .otype{ background:var(--soft); border-radius:999px; padding:3px 10px; font-weight:700; color:var(--ink); }
.order .otype.rsv{ background:#FFF1E2; color:#C2650B; }
.order .ono{ font-weight:700; color:var(--price); font-size:13px; }
.order .ono:hover{ text-decoration:underline; }
.order .ost{ margin-left:auto; display:inline-block; padding:3px 11px; border-radius:999px; font-size:12px; font-weight:700; line-height:1.5; white-space:nowrap; background:#EEF1F4; color:#59616B; }
/* order status pills: color by stage */
.order .ost.st-00{ background:#FFF1E2; color:#C2650B; }
.order .ost.st-01, .order .ost.st-02{ background:#FFF6D6; color:#8A6A00; }
.order .ost.st-03, .order .ost.st-04{ background:#E6F0FF; color:#2459B8; }
.order .ost.st-10, .order .ost.st-11{ background:#DDF3FF; color:#0B78AE; }
.order .ost.st-12{ background:#DDF6E6; color:#177A3C; }
.order .ost.st-20, .order .ost.st-28{ background:#EFE6FF; color:#6A3FC4; }
.order .ost.st-29{ background:#EEF1F4; color:#59616B; }
.order .ost.st-23, .order .ost.st-25{ background:#FFE3E1; color:#C42B22; }
.order .ost.st-30{ background:#FFDDE6; color:#B3123F; }
.order .ost.st-06, .order .ost.st-15, .order .ost.st-16, .order .ost.st-17, .order .ost.st-18, .order .ost.st-50{ background:#FFE9DC; color:#D2500A; }
.order .ob{ display:flex; align-items:baseline; gap:12px; margin-top:8px; }
.order .onm{ flex:1; min-width:0; font-size:14px; color:var(--ink); }
.order .onm:hover{ color:var(--accent); text-decoration:underline; }
.order .oamt{ font-size:14px; font-weight:700; color:var(--price); white-space:nowrap; }
.order .obtn{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.order.compact .oh .oamt{ margin-left:0; color:var(--price); font-weight:700; }

@media (max-width:600px){
	.order .ost{ margin-left:0; }
	.order .obtn a{ flex:1 1 auto; text-align:center; }
}

/* ===== ǪÅÍ ===== */
footer{ border-top:1px solid var(--line); background:var(--soft); padding:26px 0 40px; font-size:12.5px; color:var(--muted); }
footer .fnav{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:12px; }
footer .fnav a{ color:var(--ink); font-weight:700; }
footer p{ margin:3px 0; }
/* »ç¾÷ÀÚ Á¤º¸(±¸PC ÇÏ´Ü°ú °°Àº ³»¿ë) - Ä­ ±¸ºÐ¼±°ú, ´­·¯Áö´Â °÷(¸ÞÀϤý»ç¾÷ÀÚÁ¤º¸È®ÀÎ)¿¡ ¹ØÁÙ */
footer .fcorp{ line-height:1.75; }
footer .fcorp .fbar{ color:var(--line); margin:0 2px; }
footer .fcorp a{ color:inherit; text-decoration:underline; }
footer .fcorp a:hover{ color:var(--ink); }

/* ===== 1:1 ¹®ÀÇ ¡¤ FAQ ===== */
/* ÅÇÀº ¸ñ·ÏÈ­¸éÀÇ .chips ¸¦ ±×´ë·Î ¾´´Ù. ¿©±â¼­´Â ¹®ÀÇ Àü¿ë ºÎºÐ¸¸ µÐ´Ù. */
.qa-sel{
	width:100%; font-family:inherit; font-size:14px; color:var(--ink);
	padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:#fff;
}
.qa-faq{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; }
.qa-faq-item{ border-bottom:1px solid var(--line-soft); }
.qa-faq-item:last-child{ border-bottom:0; }
.qa-row{ display:flex; align-items:flex-start; gap:10px; padding:14px 16px; }
.qa-row.q{ cursor:pointer; }
.qa-badge{
	flex:0 0 22px; width:22px; height:22px; border-radius:6px; margin-top:1px;
	display:inline-flex; align-items:center; justify-content:center;
	font-size:11.5px; font-weight:800; color:#fff;
}
.qa-badge.q{ background:var(--accent); }
.qa-badge.a{ background:#2B8A3E; }
.qa-q{ flex:1; font-size:13.5px; font-weight:700; line-height:1.55; }
.qa-a{ flex:1; font-size:13px; color:var(--muted); line-height:1.7; white-space:pre-line; }
.qa-row.a{ padding-top:0; }
.qa-arrow{
	flex:0 0 auto; width:9px; height:9px; margin-top:6px;
	border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
	transform:rotate(45deg);
}
.qa-faq-item.fold .qa-row.a{ display:none; }
.qa-faq-item.fold .qa-arrow{ transform:rotate(-45deg); margin-top:8px; }
.qa-note{ margin-top:10px; font-size:12px; color:var(--muted); text-align:center; }

/* ¹®ÀÇ ¸ñ·Ï */
.qa-list{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; }
.qa-item{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line-soft); }
.qa-item:last-child{ border-bottom:0; }
.qa-item .l{ flex:1; min-width:0; }
.qa-item .d{ font-size:11.5px; color:var(--muted); margin-bottom:3px; }
.qa-item .t{ font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qa-st{ flex:0 0 auto; font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; }
.qa-st.done{ color:#B34700; background:#FFF3E6; }
.qa-st.wait{ color:var(--muted); background:var(--soft); }
.qa-del{
	flex:0 0 auto; width:32px; height:32px; border-radius:8px; cursor:pointer;
	border:1px solid var(--line); background:#fff; color:var(--muted);
	display:inline-flex; align-items:center; justify-content:center;
}
.qa-del:hover{ border-color:#F0C8C4; color:#D0392A; }
.qa-del svg{ width:15px; height:15px; }

/* ¹®ÀÇ »ó¼¼ */
.qa-box{ display:flex; gap:14px; padding:20px 0; border-bottom:1px solid var(--line-soft); }
.qa-box:last-child{ border-bottom:0; }
.qa-av{
	flex:0 0 32px; width:32px; height:32px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	font-size:14px; font-weight:800; color:#fff;
}
.qa-av.q{ background:var(--muted); }
.qa-av.a{ background:var(--accent); }
.qa-bd{ flex:1; min-width:0; }
.qa-meta{ font-size:11.5px; color:var(--muted); margin-bottom:5px; }
.qa-subj{ font-size:16px; font-weight:800; margin-bottom:12px; }
.qa-info{ background:var(--soft); border-radius:10px; padding:12px 14px; font-size:12.5px; margin-bottom:12px; }
.qa-info .row{ padding:2px 0; word-break:break-all; }
.qa-info .k{ color:var(--muted); }
.qa-content{ font-size:13.5px; line-height:1.8; white-space:pre-wrap; word-break:break-word; }
.qa-files{ margin-top:14px; display:flex; flex-direction:column; gap:7px; }
.qa-files a{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--link); }
.qa-files a svg{ width:14px; height:14px; flex:0 0 14px; }

/* ===== ÀÔ·ÂÆû (1:1 ¹®ÀÇ ÀÛ¼º) ===== */
.f-row{ margin-bottom:18px; }
.f-label{ font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:7px; }
.f-label .req{ color:#D0392A; margin-left:2px; }
.f-label .sub{ font-weight:400; color:var(--muted); }
.f-input,.f-textarea{
	width:100%; font-family:inherit; font-size:14px; color:var(--ink);
	padding:11px 13px; border:1px solid var(--line); border-radius:9px; background:#fff;
}
.f-input:focus,.f-textarea:focus{ outline:2px solid var(--brand); outline-offset:-1px; }
/* ºü¶ß·È°Å³ª À߸ø ³ÖÀº Ä­Àº Å׵θ®·Îµµ ¾Ë·Á ÁØ´Ù (Æ˾÷À» ¶ç¿ìÁö ¾Ê´Â´Ù) */
.f-input.bad,.f-textarea.bad{ border-color:#D0392A; background:#FFFBFA; }
.f-input.bad:focus,.f-textarea.bad:focus{ outline-color:#D0392A; }
.f-input[readonly]{ background:var(--soft); }
.f-textarea{ min-height:150px; resize:vertical; line-height:1.7; }
.f-inline{ display:flex; gap:8px; align-items:center; }
.f-inline .f-input{ flex:1; min-width:0; }
.f-sep{ color:var(--muted); }
.f-hp .f-input{ max-width:120px; text-align:center; }

/* À̸ÞÀÏ : ¾ÕºÎºÐ @ µµ¸ÞÀÎ [°í¸£±â] [Áߺ¹È®ÀÎ] : Á¼Àº È­¸é¿¡¼­µµ ÇÑ ÁÙ·Î µÐ´Ù */
.f-email{ display:flex; gap:7px; align-items:center; flex-wrap:nowrap; }
.f-email .f-input{ flex:1 1 0; min-width:0; }
.f-email .sel{
	flex:0 1 144px; min-width:0; font-family:inherit; cursor:pointer;
	padding-right:8px; appearance:auto; -webkit-appearance:menulist;
}
.f-email .f-sep{ flex:0 0 auto; }
.f-email .btn-sub{ flex:0 0 auto; white-space:nowrap; }
@media (max-width:720px){
	.f-email{ gap:5px; }
	.f-email .f-input{ padding:11px 8px; }
	.f-email .sel{ flex:0 1 104px; font-size:12.5px; }
	.f-email .btn-sub{ padding:8px 10px; font-size:12.5px; }
}

/* ÁÖ¹® / »óÇ° °í¸£±â */
.picker{ display:none; margin-top:8px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; }
.picker.show{ display:block; }
.picker-search{ padding:9px 10px; border-bottom:1px solid var(--line-soft); background:var(--soft); }
.picker-search input{
	width:100%; font-family:inherit; font-size:13px; padding:8px 11px;
	border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink);
}
.picker-opts{ max-height:300px; overflow-y:auto; }
.picker-opt{
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	padding:11px 14px; border-bottom:1px solid var(--line-soft); cursor:pointer; font-size:13px;
}
.picker-opt:last-child{ border-bottom:0; }
.picker-opt:hover{ background:#FFFBF0; }
.picker-opt .no{ flex:1; min-width:0; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.picker-opt .amt{ flex:0 0 auto; font-size:11.5px; color:var(--muted); }
.picker-opt .g{ color:var(--muted); font-weight:400; }
.picker-empty{ padding:22px 14px; text-align:center; font-size:12.5px; color:var(--muted); }

/* ÆÄÀÏ Ã·ºÎ */
.f-file{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.f-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.f-chip{
	display:inline-flex; align-items:center; gap:7px; max-width:100%;
	padding:6px 10px; border:1px solid var(--line); border-radius:999px;
	font-size:12px; background:var(--soft);
}
.f-chip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.f-chip a{ color:var(--muted); font-weight:700; }
.f-chip a:hover{ color:#D0392A; }
.f-note{ margin-top:9px; font-size:11.5px; color:var(--muted); line-height:1.8; }

/* µ¿ÀÇ */
.f-agree{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:14px 0 0; border-top:1px solid var(--line-soft); font-size:13px; }
.f-agree .more{ margin-left:auto; font-size:12px; color:var(--muted); cursor:pointer; text-decoration:underline; }
.f-agree-detail{ display:none; margin-top:10px; padding:12px 14px; background:var(--soft); border-radius:9px; font-size:12px; color:var(--muted); line-height:1.8; }
.f-agree-detail.show{ display:block; }
/* È­¸é ¸Ç ¾Æ·¡ 'Ãë¼Ò / ´ÙÀ½À¸·Î' °°Àº ¹öÆ° ÁÙ.
   ¿©Å ũ±â ±ÔÄ¢ÀÌ ¾ø¾î¼­ ±ÛÀÚ Å©±â ±×´ë·Î ÀÛ°Ô ³ª¿Ô´Ù. ¿©±â¼­ Á¤ÇØ ÁØ´Ù. */
.f-submit{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:28px 0 8px; }
.f-submit .btn-main,
.f-submit .btn-sub,
.f-submit .btn-off{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:180px; padding:15px 30px; border-radius:10px;
	font-family:inherit; font-size:16px; font-weight:700; cursor:pointer; border:0;
}
.f-submit .btn-sub{ border:1px solid var(--line); }
@media (max-width:520px){
	.f-submit{ gap:8px; }
	.f-submit .btn-main,
	.f-submit .btn-sub,
	.f-submit .btn-off{ min-width:0; flex:1 1 44%; padding:14px 10px; font-size:15px; }
}

/* ===== ȸ¿ø°¡ÀÔ ===== */
.steps{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.step{
	display:inline-flex; align-items:center; gap:7px; padding:8px 15px;
	border:1px solid var(--line); border-radius:999px; font-size:12.5px; color:var(--muted); background:#fff;
}
.step .n{
	width:19px; height:19px; border-radius:50%; background:var(--soft); color:var(--muted);
	font-size:11px; font-weight:800; line-height:19px; text-align:center;
}
.step.on{ border-color:var(--brand); background:#FFFBF0; color:var(--ink); font-weight:700; }
.step.on .n{ background:var(--brand); color:#4A3A00; }
.step-sep{ color:var(--line); }

/* ¾à°üÀº Á¶(ðÉ)¸¶´Ù Á¦¸ñÀ» ¼¼¿ì°í Ç׸¶´Ù ÁÙÀ» ¶ç¿î´Ù.
   ±âÁ¸Ã³·³ Åë±ÛÀ» ±×´ë·Î È긮¸é ¾îµð°¡ ¾î´À Á¶ÀÎÁö ´«¿¡ µé¾î¿ÀÁö ¾Ê´Â´Ù. */
.terms-box{
	height:380px; overflow-y:auto; padding:20px 24px; background:#fff;
	border:1px solid var(--line); border-radius:10px;
	font-size:13px; line-height:1.95; color:#4A4A4A;
}
/* º»¹®Àº ÇÑ ÁÙ °£°ÝÀ¸·Î ºÙÀÌ°í, Á¶ Á¦¸ñ À§´Â µÎ ÁÙ(51px)À» ¶ç¿î´Ù.
   ¹ØÁÙ°ú ù ¹®Àå »çÀÌ´Â ±× Àý¹Ý(25px)¸¸ ¶ç¿ö Á¦¸ñ¿¡ ºÙ¿© ³õ´Â´Ù.
   (13px x ÁÙ°£°Ý 1.95 = ÇÑ ÁÙ ¾à 25px) */
.tm-h{
	margin:51px 0 25px; padding-bottom:7px;
	font-size:13.5px; font-weight:800; color:var(--ink);
	border-bottom:1px solid var(--line-soft);
}
.tm-h:first-child{ margin-top:0; }
.tm-p{ margin:0; }
.tm-p.num{ padding-left:18px; text-indent:-18px; }   /* ¨ç¨è¨é µÚ ÁÙÀ» ±ÛÀÚ¿¡ ¸ÂÃç µé¿©¾´´Ù */
.tm-li{ position:relative; margin:0; padding-left:16px; }
.tm-li::before{
	content:''; position:absolute; left:4px; top:12px;
	width:3px; height:3px; border-radius:50%; background:var(--muted);
}
.terms-note{ margin-top:10px; font-size:11.5px; color:var(--muted); }
.f-help{ margin-top:6px; font-size:11.5px; color:var(--muted); line-height:1.7; }
.f-msg{ margin-top:6px; font-size:12px; font-weight:700; }
.f-msg.ok{ color:#2B8A3E; }
.f-msg.bad{ color:#D0392A; }
.f-radios{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; font-size:13px; }
.f-radios label{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.f-date .f-input{ max-width:92px; text-align:center; }

.kids-wrapx{ overflow-x:auto; }
.kids{ width:100%; border-collapse:collapse; font-size:13px; min-width:560px; }
.kids th,.kids td{ border-bottom:1px solid var(--line-soft); padding:9px 8px; text-align:center; }
.kids thead th{ background:var(--soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-weight:700; white-space:nowrap; }
.kids .f-input{ padding:8px 10px; font-size:13px; }
.kids .nm .f-input{ min-width:110px; }
.kids .bd{ display:flex; gap:4px; align-items:center; justify-content:center; white-space:nowrap; }
.kids .bd .f-input{ width:62px; text-align:center; padding:8px 6px; }
.kids .bd .f-input.mm,.kids .bd .f-input.dd{ width:48px; }

#n26post{ display:none; border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-top:8px; height:320px; position:relative; }
#n26post .close{ position:absolute; right:6px; top:6px; z-index:2; cursor:pointer; background:#fff; border:1px solid var(--line); border-radius:6px; padding:3px 9px; font-size:12px; }

/* ===== ÀÌ¿ë¾È³» ===== */
.gd-nav{ margin-bottom:22px; }
.gd-sec{ margin-bottom:34px; scroll-margin-top:20px; }
.gd-sec > h2{
	font-size:17px; font-weight:800; margin:0 0 12px;
	padding-left:11px; border-left:4px solid var(--brand);
}
.gd-sec p{ margin:0 0 9px; font-size:13.5px; line-height:1.85; }
/* ¹øÈ£¿Í Á¡Àº ::before ·Î Á÷Á¢ ±×¸°´Ù. ºê¶ó¿ìÀú°¡ ºÙÀÌ´Â ±âº» Ç¥½Ã¸¦ ²ôÁö ¾ÊÀ¸¸é
   "1. ¨ç" ó·³ ¹øÈ£°¡ µÎ ¹ø ³ª¿Â´Ù. */
.gd-list{ margin:0 0 12px; padding:0; list-style:none; }
.gd-list li{ position:relative; padding:0 0 0 15px; margin-bottom:7px; font-size:13.5px; line-height:1.8; }
.gd-list li::before{ content:''; position:absolute; left:2px; top:10px; width:4px; height:4px; border-radius:50%; background:var(--brand-dark); }
.gd-list.num{ counter-reset:gd; }
.gd-list.num li{ padding-left:26px; }
.gd-list.num li::before{
	counter-increment:gd; content:counter(gd); left:0; top:2px;
	width:19px; height:19px; border-radius:50%; background:var(--brand); color:#4A3A00;
	font-size:11.5px; font-weight:800; line-height:19px; text-align:center;
}
.gd-wrapx{ overflow-x:auto; margin-bottom:12px; }
.gd-table{ width:100%; border-collapse:collapse; font-size:13px; min-width:460px; background:#fff; }
.gd-table th,.gd-table td{ border:1px solid var(--line); padding:10px 12px; text-align:left; line-height:1.7; }
.gd-table thead th{ background:var(--soft); font-weight:700; text-align:center; }
.gd-table th.k{ background:var(--soft); width:118px; white-space:nowrap; }
.gd-table td.c{ text-align:center; }
.gd-table td.r{ text-align:right; font-variant-numeric:tabular-nums; }
.gd-warn{
	margin:0 0 12px; padding:12px 14px; border-radius:10px;
	background:#FFF6E8; border:1px solid #F4DCAE; font-size:12.5px; color:#7A5E00; line-height:1.8;
}
.gd-tip{ font-size:12.5px; color:var(--muted); line-height:1.8; }

/* ===== ¿¹¾à³»¿ª ===== */
.rv-wrapx{ overflow-x:auto; }
.rv-table{ width:100%; border-collapse:collapse; font-size:13px; min-width:640px; background:#fff; }
.rv-table th,.rv-table td{ border-bottom:1px solid var(--line-soft); padding:11px 10px; text-align:center; }
.rv-table thead th{ background:var(--soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-weight:700; white-space:nowrap; }
.rv-table td.nm{ text-align:left; }
.rv-nm{ display:flex; align-items:center; gap:10px; text-align:left; }
.rv-nm img{ flex:0 0 42px; width:42px; border-radius:4px; }
.rv-nm .t{ font-weight:700; line-height:1.5; }
.rv-num{ font-variant-numeric:tabular-nums; }
.rv-st{ font-weight:700; }
.rv-st.ok{ color:#2B8A3E; }
.rv-st.wait{ color:#D0392A; }
.rv-st.date{ color:var(--price); }
.rv-cancel{ color:#D0392A; font-weight:700; }
.rv-btns{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:20px; }

@media (max-width:640px){
	.f-hp .f-input{ max-width:none; }
	.qa-box{ gap:10px; }
}

/* ===== ¹ÝÀÀÇü ===== */
@media (max-width:1024px){
	.logo img{ width:124px; height:49px; }
	.goods{ grid-template-columns:repeat(auto-fill, minmax(175px,1fr)); gap:14px; }
}
@media (max-width:860px){
	.util{ display:none; }
	.head .wrap{ flex-wrap:wrap; gap:12px; }
	.hsearch{ order:3; max-width:none; flex:1 0 100%; }
	.burger{ display:block; }
	.gnb .wrap{ display:none; flex-direction:column; gap:0; padding-top:4px; padding-bottom:8px; }
	.gnb.open .wrap{ display:flex; }
	.gnb a{ border-radius:8px; padding:11px 14px; }
	.hero{ padding:24px 20px; }
	.hero h1{ font-size:21px; }
}
@media (max-width:640px){
	/* Á¼Àº È­¸é¿¡¼­´Â °¡·ÎÁÙµµ °ª¡¤¹öÆ°À» ¾Æ·¡·Î ³»·Á µÎ ÁÙ·Î ¾´´Ù */
	.goods.row .card .body{ flex-wrap:wrap; gap:8px 14px; padding:11px 13px; }
	.goods.row .card .info{ flex:1 0 100%; }
	.goods.row .card .price{ flex:0 0 auto; text-align:left; }
	.goods.row .card .btns{ flex:1 0 auto; justify-content:flex-end; }
	.goods.row .card .thumb{ flex:0 0 92px; width:92px; }
	.goods.row .card .thumb img{ max-height:86px; }
}
@media (max-width:520px){
	.goods{ grid-template-columns:repeat(2, 1fr); gap:10px; }
	.card .thumb{ padding:12px 8px; }
	.card .thumb img{ max-height:130px; }
	.card .body{ padding:10px; }
	.goods.row .card .thumb{ padding:8px; }
	.hicons{ gap:8px; }
	.hicon{ width:36px; height:36px; flex:0 0 36px; }
	.hicon svg{ width:19px; height:19px; }
	.filters select{ flex:1 0 46%; min-width:0; }
	.filters .right{ flex:1 0 100%; margin-left:0; justify-content:space-between; }
}
/* order progress strip + book/cd count pills (ported from the mobile order list) */
.mk-pipeline{
display:flex; align-items:flex-start; justify-content:space-between;
margin:22px 0 16px; padding:16px 8px;
background:#fff; border:1px solid #F1F0F5; border-radius:16px;
box-shadow:0 4px 16px rgba(32,35,43,.05);
}
.mk-pipe-item{ flex:1; min-width:0; text-align:center; }
.mk-pipe-num{ font-size:14px; font-weight:800; color:var(--muted); }
.mk-pipe-num.on{ color:#12957F; }
.mk-pipe-frac{ display:flex; align-items:center; justify-content:center; gap:3px; white-space:nowrap; }
.mk-pipe-frac span{ font-size:13px; font-weight:800; }
.mk-pipe-frac .mk-frac-slash{ color:var(--muted); font-weight:600; }
.mk-pipe-frac .mk-frac-miss{ color:#E5484D; }
.mk-pipe-label{ margin-top:4px; font-size:10px; font-weight:700; color:var(--muted); }
.mk-pipe-arrow{ flex-shrink:0; color:#D9D7E2; font-size:13px; padding-top:2px; }
.mk-qty-pills{ display:flex; gap:6px; flex-wrap:wrap; }
.mk-qty-pill{
font-size:10.5px; font-weight:700; color:#12957F;
background:#D8F3EC; padding:3px 8px; border-radius:999px;
white-space:nowrap;
}
/* order list: count pills sit right next to the title, amount stays at the right edge */
.order .onm{ flex:0 1 auto; }
.order .mk-qty-pills{ margin-left:10px; }
.order .oamt{ margin-left:auto; }
/* [2026-10-12] ÀÛ°¡º° 2´Ü°è(list.php?mode=author) : Á¤·Ä ¾Ë¾à + À̸§ ã±â */
.au-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:14px; padding-top:12px; border-top:1px dashed var(--line); }
.au-lab{ font-size:13px; color:var(--muted); }
.au-lab b{ color:var(--ink); }
.au-sort{ display:flex; gap:4px; }
.au-sort a{ font-size:12.5px; font-weight:700; color:var(--muted); padding:5px 11px; border-radius:999px; border:1px solid var(--line); background:#fff; }
.au-sort a.on{ color:#fff; background:var(--ink); border-color:var(--ink); }
.au-find{ margin-left:auto; width:220px; max-width:100%; height:34px; padding:0 12px; font:inherit; font-size:13px; border:1px solid var(--line); border-radius:8px; }
.au-find:focus{ outline:2px solid var(--price); outline-offset:1px; }
.au-none{ margin-top:10px; font-size:13px; color:var(--muted); }
#auChips{ position:relative; max-height:420px; overflow-y:auto; }
@media (max-width:640px){ .au-find{ margin-left:0; width:100%; } }
/* 2026-10-12 ÀԱݰèÁ : »ó´Ü ¸Þ´ºÁÙ ¸µÅ©(.util-bank) ¡¤ ÀÛÀº â(.bk-ov, inc/footer.php) ¡¤ ¾È³» È­¸é(bankinfo.php .bk-page) */
.util a.util-bank{ display:inline-flex; align-items:center; gap:4px; color:var(--accent); font-weight:700; }
.util a.util-bank:hover{ color:#D95700; }
.bk-ov{ position:fixed; inset:0; z-index:9500; background:rgba(30,35,40,.45); display:flex; align-items:center; justify-content:center; padding:16px; }
.bk-ov[hidden]{ display:none; }
.bk-box{ position:relative; width:440px; max-width:100%; max-height:calc(100vh - 32px); overflow-y:auto; background:#fff; border-radius:14px; padding:24px 24px 20px; box-shadow:0 18px 40px rgba(0,0,0,.25); }
.bk-box h2{ margin:0; font-size:18px; color:var(--ink); }
.bk-x{ position:absolute; top:12px; right:12px; width:34px; height:34px; border:0; border-radius:50%; background:transparent; font-size:24px; line-height:1; color:var(--muted); cursor:pointer; }
.bk-x:hover{ background:var(--soft); color:var(--ink); }
.bk-x:focus-visible, .bk-copy:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.bk-owner{ margin:6px 0 14px; font-size:13px; color:var(--muted); }
.bk-owner b{ color:var(--ink); }
.bk-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-soft); }
.bk-list li{ display:flex; align-items:center; gap:10px; padding:10px 2px; border-bottom:1px solid var(--line-soft); }
.bk-chip{ flex:0 0 34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; letter-spacing:-.3px; color:#fff; }
.bk-kb{ background:#FFBC00; color:#4A3A00; }
.bk-woori{ background:#0067AC; }
.bk-hana{ background:#009490; }
.bk-sc{ background:#0473EA; }
.bk-shinhan{ background:#0046FF; }
.bk-ibk{ background:#1C64B4; }
.bk-nh{ background:#00A651; }
.bk-kakao{ background:#FFE300; color:#3C1E1E; }
.bk-toss{ background:#0064FF; }
.bk-name{ flex:0 0 84px; font-size:13.5px; font-weight:700; color:var(--ink); }
.bk-no{ flex:1; font-size:15px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:.2px; }
.bk-copy{ flex:0 0 auto; height:30px; padding:0 12px; border:1px solid var(--line); border-radius:999px; background:#fff; font:inherit; font-size:12px; font-weight:700; color:var(--ink); cursor:pointer; }
.bk-copy:hover{ border-color:var(--accent); color:var(--accent); }
.bk-copy.ok{ border-color:#1B7A3E; color:#1B7A3E; }
.bk-note{ margin:14px 0 0; font-size:12.5px; line-height:1.7; color:var(--muted); }
.bk-note a{ color:var(--ink); text-decoration:underline; }
.bk-page{ max-width:640px; }
.bk-page .bk-owner{ margin-top:0; }
@media (max-width:480px){ .bk-name{ flex-basis:68px; font-size:12.5px; } .bk-no{ font-size:13.5px; } }