:root { --ink:#1f2023; --muted:#6e7178; --line:#e6e7eb; --paper:#f7f7f5; --surface:#fff; --red:#98001b; --red-dark:#760016; --red-soft:#f9eef1; --navy:#25262a; --shell:1180px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-width:320px; margin:0; overflow-x:hidden; background:var(--surface); color:var(--ink); font-family:Pretendard,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif; line-height:1.55; word-break:keep-all; overflow-wrap:break-word; }
a { color:inherit; text-decoration:none; } button,input { font:inherit; } img { display:block; max-width:100%; }
.shell { width:min(var(--shell),calc(100% - 40px)); margin-inline:auto; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }.skip-link { position:fixed; top:0; left:1rem; z-index:30; transform:translateY(-120%); background:var(--red); color:#fff; padding:.75rem 1rem; }.skip-link:focus { transform:translateY(0); }
.site-header { position:sticky; top:0; z-index:20; background:#fff; box-shadow:0 2px 12px rgba(31,32,35,.04); }
.header-main { min-height:88px; display:grid; grid-template-columns:1fr minmax(260px,540px) 1fr; gap:1.6rem; align-items:center; }.brand { display:grid; justify-self:start; line-height:1; }.brand img { display:block; width:154px; height:auto; }.site-footer strong { color:var(--red); font-size:2rem; font-weight:900; letter-spacing:-.085em; }.site-search { display:flex; align-items:center; width:100%; height:42px; border:1px solid #cfd1d6; background:#fff; }.site-search:focus-within { border-color:var(--red); box-shadow:0 0 0 2px var(--red-soft); }.site-search input[type="search"] { width:100%; min-width:0; height:100%; padding:0 .9rem; border:0; outline:0; color:var(--ink); font-size:.9rem; }.site-search input[type="search"]::placeholder { color:#9699a0; }.site-search button { align-self:stretch; min-width:62px; border:0; background:var(--red); color:#fff; font-size:.84rem; font-weight:800; cursor:pointer; }.site-search button:hover { background:var(--red-dark); }
.quick-links { justify-self:end; display:flex; align-items:center; gap:.8rem; color:#4d5057; font-size:.75rem; font-weight:700; white-space:nowrap; }.quick-links a + a { padding-left:.8rem; border-left:1px solid #d9dade; }.quick-links a:hover { color:var(--red); }
@media (min-width:768px) { .quick-links { gap:1.15rem; }.quick-links a,.quick-links a + a { display:grid; width:auto; min-width:38px; height:52px; padding-left:0; align-content:center; justify-items:center; gap:3px; border-left:0; font-size:0; }.quick-links a::before { display:block; width:26px; height:26px; background:center/23px 23px no-repeat; content:""; }.quick-links a::after { position:static; width:auto; height:auto; background:none; box-shadow:none; color:#34363c; font-size:.75rem; font-weight:800; line-height:1; white-space:nowrap; }.quick-links a:nth-child(1)::before { background-image:url("/v2/assets/icon-user.svg"); }.quick-links a:nth-child(1)::after { content:"로그인"; }.quick-links a:nth-child(2)::before { width:18px; height:22px; border:1.7px solid currentColor; border-radius:2px; background:none; }.quick-links a:nth-child(2)::after { content:"마이페이지"; }.quick-links a:nth-child(3)::before { background-image:url("/v2/assets/icon-cart.svg"); }.quick-links a:nth-child(3)::after { content:"장바구니"; } }
@media (min-width:768px) { .quick-links a:nth-child(1)::before { background-image:url("./icon-login.svg"); }.quick-links a:nth-child(2)::before { width:26px; height:26px; border:0; border-radius:0; background:center/23px 23px no-repeat url("/v2/assets/icon-user.svg"); } }
.search-toggle,.mobile-search-toggle,.menu-toggle,.mobile-search-panel,.mobile-menu-dim,.mobile-menu { display:none; }
.nav-band { border-top:1px solid #f0f1f3; border-bottom:1px solid #e5e6e9; }.header-row { min-height:50px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }.main-nav { display:flex; align-items:center; gap:clamp(1rem,2.8vw,2.5rem); margin-left:0; }.main-nav a { display:inline-flex; align-items:center; min-height:50px; border-bottom:2px solid transparent; color:#2d2f34; font-size:.94rem; font-weight:750; white-space:nowrap; }.main-nav a:hover,.main-nav a[aria-current="page"] { border-color:var(--red); color:var(--red); }.header-contact { display:flex; align-items:center; gap:.8rem; color:#4d5057; font-size:.75rem; font-weight:700; white-space:nowrap; }.header-contact a + a { padding-left:.8rem; border-left:1px solid #d9dade; }.header-contact a:hover { color:var(--red); }
.hero { border-bottom:1px solid var(--line); background:#f8f8f8; }.hero-grid { min-height:390px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(440px,1.1fr); gap:clamp(2rem,6vw,6rem); align-items:center; }.hero-copy { padding-block:3rem; }.eyebrow { margin:0 0 .65rem; color:var(--red); font-size:.7rem; font-weight:850; letter-spacing:.14em; }.hero h1,.section-heading h2,.contact-panel h2,.listing h1 { margin:0; font-weight:850; letter-spacing:-.065em; line-height:1.15; text-wrap:balance; }.hero h1 { max-width:13ch; font-size:clamp(2.1rem,3.4vw,3.7rem); }.hero-copy>p:not(.eyebrow) { max-width:35ch; margin:1.1rem 0 0; color:var(--muted); text-wrap:balance; }.hero-copy .button { margin-top:1.55rem; }.button { display:inline-grid; min-height:46px; padding-inline:1.15rem; place-items:center; font-weight:750; transition:transform .18s ease,background .18s ease; }.button:hover { transform:translateY(-2px); }.button:active { transform:translateY(1px); }.button-primary { background:var(--red); color:#fff; }.button-primary:hover { background:var(--red-dark); }.hero-image { height:100%; min-height:310px; overflow:hidden; }.hero-image img { width:100%; height:100%; object-fit:cover; }
.category-section { padding-block:clamp(4rem,8vw,7rem); }.section-heading { margin-bottom:2.25rem; }.section-heading h2 { margin:0; font-size:clamp(1.8rem,3vw,2.6rem); letter-spacing:-.055em; }.section-heading>p:last-child { margin:.6rem 0 0; color:var(--muted); }.category-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid var(--red); border-left:1px solid var(--line); }.category-card { min-height:230px; padding:1.4rem; display:flex; flex-direction:column; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; transition:background .2s ease,color .2s ease; }.category-card:hover { background:var(--red); color:#fff; }.category-card span { color:var(--red); font-size:.78rem; font-weight:800; }.category-card strong { margin-top:auto; font-size:1.45rem; letter-spacing:-.045em; }.category-card em { margin-top:.4rem; color:var(--muted); font-size:.88rem; font-style:normal; text-wrap:balance; }.category-card:hover span { color:#ffd8df; }.category-card:hover em { color:#ffe6eb; }
.new-section { padding-block:clamp(4rem,7vw,6rem); background:#fff; }.section-heading { margin-bottom:2rem; }.section-heading h2 { font-size:clamp(1.85rem,3vw,2.6rem); }.new-heading { display:flex; align-items:end; justify-content:space-between; gap:2rem; }.new-heading>p { max-width:38ch; margin:0; color:var(--muted); text-align:right; text-wrap:balance; }.new-products { min-height:232px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.2rem; align-content:start; }.new-products-message { grid-column:1/-1; margin:0; padding:3rem 1rem; border:1px solid var(--line); background:#fafafa; color:var(--muted); text-align:center; font-size:.92rem; }.new-product-card { min-width:0; display:grid; gap:.75rem; transition:transform .18s ease; }.new-product-card:hover { transform:translateY(-3px); }.new-product-thumb { display:grid; width:100%; aspect-ratio:1/1; place-items:center; overflow:hidden; background:#f4f4f5; }.new-product-thumb img { width:100%; height:100%; object-fit:cover; }.new-product-thumb.is-empty::after { content:'KOOKIS'; color:#858993; font-size:.7rem; font-weight:800; letter-spacing:.08em; }.new-product-meta { min-width:0; display:grid; gap:.2rem; }.new-product-meta em { color:var(--red); font-size:.72rem; font-style:normal; font-weight:800; }.new-product-meta strong { overflow:hidden; color:var(--ink); font-size:.96rem; line-height:1.35; letter-spacing:-.025em; text-overflow:ellipsis; white-space:nowrap; }.new-product-meta span { color:var(--muted); font-size:.82rem; }
.contact-section { padding-block:clamp(3.5rem,6vw,5.5rem); background:#f7f7f7; }.contact-panel { padding:clamp(2rem,4vw,3.5rem); display:flex; align-items:center; justify-content:space-between; gap:2rem; background:var(--red); color:#fff; }.contact-panel .eyebrow { color:#ffd4dd; }.contact-panel h2 { font-size:clamp(1.75rem,3vw,2.6rem); }.contact-panel p:not(.eyebrow) { margin-bottom:0; color:#ffdfe5; }.button-light { background:#fff; color:var(--red-dark); white-space:nowrap; }
.site-footer { background:#1b1c20; color:#fff; }.footer-links { display:flex; align-items:center; gap:1.25rem; min-height:54px; border-bottom:1px solid #383a40; color:#e3e4e8; font-size:.84rem; font-weight:700; }.footer-links a:hover { color:#fff; }.footer-row { display:flex; align-items:end; justify-content:space-between; gap:2rem; padding-block:2.4rem; }.footer-info p { max-width:72ch; margin:.38rem 0 0; color:#b9bbc1; font-size:.8rem; }.footer-info p:last-child { margin-top:.8rem; font-size:.75rem; }.footer-row>a { color:#ececef; font-size:.9rem; white-space:nowrap; }
.listing { min-height:calc(100dvh - 250px); padding-block:clamp(4rem,8vw,7rem); }.listing h1 { font-size:clamp(2.2rem,4vw,4rem); }.listing-description { max-width:45ch; margin:1rem 0 2rem; color:var(--muted); text-wrap:balance; }.listing-toolbar { display:flex; justify-content:space-between; padding:1rem 0; border-top:2px solid var(--red); border-bottom:1px solid var(--line); font-size:.9rem; }.listing-toolbar a { color:var(--red); font-weight:700; }.empty-products { padding:clamp(3rem,8vw,7rem) 1rem; text-align:center; background:var(--paper); }.empty-products strong { display:block; font-size:clamp(1.3rem,2.2vw,1.8rem); letter-spacing:-.04em; }.empty-products p { max-width:42ch; margin:1rem auto 0; color:var(--muted); }.empty-products b { color:var(--red-dark); }
@media (max-width:1023px) { .header-main { grid-template-columns:1fr minmax(280px,480px) 1fr; gap:1rem; }.quick-links { gap:.55rem; font-size:.69rem; }.quick-links a + a { padding-left:.55rem; }.main-nav { gap:1rem; }.header-contact { gap:.55rem; font-size:.69rem; }.header-contact a + a { padding-left:.55rem; }.hero-grid { min-height:auto; grid-template-columns:1fr 1fr; gap:2rem; }.hero-image { min-height:280px; }.new-products { grid-template-columns:repeat(3,minmax(0,1fr)); }.category-grid { grid-template-columns:repeat(2,1fr); }.category-card { min-height:190px; } }
@media (max-width:767px) { .shell { width:min(100% - 32px,var(--shell)); }.header-main { min-height:56px; grid-template-columns:1fr auto; grid-template-rows:auto auto; gap:.35rem 1rem; padding-block:.45rem 0; }.brand img { width:126px; }.site-search { display:none; }.site-search.is-open { display:flex; grid-column:1/-1; grid-row:3; height:42px; margin-bottom:.45rem; }.site-search button { min-width:56px; }.quick-links { display:flex; grid-column:1/-1; grid-row:2; justify-self:stretch; justify-content:flex-end; min-height:28px; gap:.65rem; padding-bottom:.35rem; font-size:.67rem; }.quick-links a + a { padding-left:.65rem; }.search-toggle { position:relative; display:grid; width:36px; height:36px; padding:0; place-items:center; border:1px solid var(--line); background:#fff; color:var(--ink); }.search-toggle::before { width:14px; height:14px; border:2px solid currentColor; border-radius:50%; content:""; }.search-toggle::after { position:absolute; width:8px; height:2px; margin:13px 0 0 13px; background:currentColor; transform:rotate(45deg); content:""; }.search-toggle[aria-expanded="true"] { color:var(--red); border-color:var(--red); }.nav-band { border-top:0; border-bottom:0; }.nav-band .shell { width:100%; }.header-row { min-height:0; align-items:stretch; flex-direction:column; gap:0; }.main-nav { display:grid; order:1; width:100%; margin:0; padding:.2rem 0 .25rem; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; }.main-nav a { min-height:36px; justify-content:center; padding:.1rem .5rem; border:0; font-size:.88rem; font-weight:800; line-height:1.2; text-align:center; white-space:normal; }.main-nav a[aria-current="page"] { border-bottom:0; }.header-contact { display:grid; order:2; width:100%; min-height:34px; padding:.15rem 0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; background:#f6f6f7; border-top:0; font-size:.72rem; text-align:center; }.header-contact a { display:grid; min-height:32px; place-items:center; }.header-contact a + a { padding-left:0; border-left:0; }.hero-grid { grid-template-columns:1fr; gap:0; }.hero-copy { padding-block:2.75rem 2rem; }.hero h1 { font-size:clamp(2.15rem,11vw,3.1rem); }.hero-image { min-height:220px; }.new-heading { display:block; }.new-products { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.contact-panel { display:grid; grid-template-columns:1fr; align-items:start; }.button-light { justify-self:start; }.footer-links { flex-wrap:wrap; gap:.45rem 1rem; padding-block:.9rem; }.footer-row { align-items:start; flex-direction:column; padding-block:2rem; }.footer-info p { font-size:.76rem; }.listing { padding-block:3.5rem; } }
@media (max-width:767px) { .header-main { min-height:64px; grid-template-columns:1fr auto; grid-template-rows:auto; padding-block:.65rem; }.brand img { width:126px; }.site-search,.quick-links,.nav-band { display:none; }.menu-toggle { display:grid; width:44px; height:44px; padding:0; place-content:center; gap:5px; border:1px solid var(--line); background:#fff; color:var(--ink); }.menu-toggle span { display:block; width:18px; height:2px; background:currentColor; transition:transform .18s ease,opacity .18s ease; }.menu-toggle[aria-expanded="true"] { color:var(--red); border-color:var(--red); }.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }.menu-toggle:focus-visible,.mobile-menu a:focus-visible,.mobile-menu button:focus-visible,.mobile-menu input:focus-visible { outline:2px solid var(--red); outline-offset:2px; }.mobile-menu { position:absolute; top:100%; right:0; left:0; z-index:25; display:grid; gap:1rem; padding:1rem; border-top:1px solid var(--line); background:#fff; box-shadow:0 14px 24px rgba(31,32,35,.14); }.mobile-menu[hidden] { display:none; }.mobile-menu-search { display:flex; height:44px; border:1px solid #cfd1d6; }.mobile-menu-search:focus-within { border-color:var(--red); box-shadow:0 0 0 2px var(--red-soft); }.mobile-menu-search input { width:100%; min-width:0; padding:0 .85rem; border:0; outline:0; color:var(--ink); }.mobile-menu-search button { min-width:60px; border:0; background:var(--red); color:#fff; font-weight:800; }.mobile-menu-primary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.15rem; }.mobile-menu-primary a { display:flex; min-height:44px; align-items:center; padding:.5rem .65rem; background:#f7f7f8; color:#24262b; font-size:.9rem; font-weight:800; }.mobile-menu-primary a[aria-current="page"] { background:var(--red-soft); color:var(--red-dark); }.mobile-menu-account,.mobile-menu-support { display:grid; gap:.15rem; }.mobile-menu-account { grid-template-columns:repeat(3,minmax(0,1fr)); }.mobile-menu-support { grid-template-columns:repeat(2,minmax(0,1fr)); }.mobile-menu-account a,.mobile-menu-support a { display:grid; min-height:40px; padding:.35rem; place-items:center; color:#4d5057; font-size:.78rem; font-weight:750; text-align:center; }.mobile-menu-account { border-top:1px solid var(--line); padding-top:.65rem; }.mobile-menu-support a { background:#f7f7f8; }.menu-open { overflow:hidden; } }
@media (max-width:767px) { .header-main { grid-template-columns:1fr auto auto; gap:.55rem; }.mobile-search-toggle { position:relative; display:grid; width:44px; height:44px; padding:0; place-items:center; border:1px solid var(--line); background:#fff; color:var(--ink); }.mobile-search-toggle::before { width:15px; height:15px; border:2px solid currentColor; border-radius:50%; content:""; }.mobile-search-toggle::after { position:absolute; width:8px; height:2px; margin:14px 0 0 14px; background:currentColor; transform:rotate(45deg); content:""; }.mobile-search-toggle[aria-expanded="true"] { color:var(--red); border-color:var(--red); }.mobile-search-toggle:focus-visible,.menu-toggle:focus-visible,.mobile-menu a:focus-visible,.mobile-menu button:focus-visible,.mobile-search-panel input:focus-visible,.mobile-search-panel button:focus-visible { outline:2px solid var(--red); outline-offset:2px; }.mobile-search-panel { position:absolute; top:100%; right:0; left:0; z-index:26; display:block; padding:1rem; border-top:1px solid var(--line); background:#fff; box-shadow:0 10px 20px rgba(31,32,35,.12); }.mobile-search-panel[hidden] { display:none; }.mobile-menu-search { display:flex; height:44px; border:1px solid #cfd1d6; }.mobile-menu-search:focus-within { border-color:var(--red); box-shadow:0 0 0 2px var(--red-soft); }.mobile-menu-search input { width:100%; min-width:0; padding:0 .85rem; border:0; outline:0; color:var(--ink); }.mobile-menu-search button { min-width:60px; border:0; background:var(--red); color:#fff; font-weight:800; }.mobile-menu-dim { position:fixed; inset:0; z-index:30; display:block; background:rgba(20,21,24,.38); }.mobile-menu-dim[hidden] { display:none; }.mobile-menu { position:fixed; top:0; right:0; bottom:0; left:auto; z-index:31; display:grid; width:min(84vw,340px); align-content:start; gap:0; padding:1.25rem 1.15rem 2rem; overflow-y:auto; border:0; background:#fff; box-shadow:-12px 0 28px rgba(31,32,35,.16); }.mobile-menu[hidden] { display:none; }.mobile-menu-header { display:flex; min-height:44px; align-items:center; justify-content:space-between; margin-bottom:1rem; }.mobile-menu-header strong { font-size:1rem; letter-spacing:-.04em; }.mobile-menu-close { width:44px; height:44px; padding:0; border:0; background:transparent; color:transparent; font-size:0; position:relative; }.mobile-menu-close::before,.mobile-menu-close::after { position:absolute; top:21px; left:13px; width:18px; height:2px; background:var(--ink); content:""; }.mobile-menu-close::before { transform:rotate(45deg); }.mobile-menu-close::after { transform:rotate(-45deg); }.mobile-menu-account,.mobile-menu-support,.mobile-menu-primary { display:grid; grid-template-columns:1fr; gap:0; }.mobile-menu-account { padding:0; border:0; }.mobile-menu-account a,.mobile-menu-support a,.mobile-menu-primary a { display:flex; min-height:46px; align-items:center; justify-content:flex-start; padding:.45rem .25rem; border:0; background:transparent; color:var(--ink); font-size:.95rem; font-weight:800; text-align:left; }.mobile-menu-support { padding-bottom:1rem; border-bottom:1px solid var(--line); }.mobile-menu-support a { color:#555861; font-size:.86rem; font-weight:700; }.mobile-menu-label { margin:1.2rem 0 .45rem; color:var(--muted); font-size:.72rem; font-weight:850; letter-spacing:.08em; }.mobile-menu-primary a[aria-current="page"] { color:var(--red-dark); background:transparent; }.menu-open { overflow:hidden; } }
@media (max-width:767px) { .mobile-menu-header { min-height:44px; justify-content:flex-end; margin-bottom:.55rem; }.mobile-menu-account,.mobile-menu-support { gap:0; }.mobile-menu-account a,.mobile-menu-support a { min-height:38px; padding:.3rem .25rem; color:#35373d; font-size:.88rem; font-weight:700; }.mobile-menu-support { padding-bottom:.7rem; border-bottom:1px solid var(--line); }.mobile-menu-label { margin:1rem 0 .55rem; color:var(--muted); font-size:.72rem; font-weight:850; letter-spacing:.12em; }.mobile-menu-primary a { min-height:48px; padding:.45rem .25rem; font-size:1.06rem; font-weight:850; } }
@media (max-width:767px) { .mobile-menu-primary { padding-bottom:.7rem; border-bottom:1px solid var(--line); }.mobile-menu-support { padding-bottom:0; border-bottom:0; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }

/* PPT feedback: compact category intro and recommendation-first homepage. */
.section-heading h1 {
  margin: 0;
  font-size: clamp(1.85rem, 3vw, 2.6rem);
  font-weight: 850;
  letter-spacing: -.065em;
  line-height: 1.15;
  text-wrap: balance;
}

.listing {
  padding-block: 2.8rem 5.5rem;
}

.listing h1 {
  font-size: clamp(2rem, 3.2vw, 3.1rem);
}

.listing-toolbar {
  margin-top: 1.3rem;
}

.listing .new-products {
  gap: 2rem 1.2rem;
}

@media (max-width: 767px) {
  .listing {
    padding-block: 2rem 4rem;
  }
}