/* VALKYN — global styles & animations (from Design N°01) */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #0b0b0c;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: #0b0b0c; color: #fff; }
button { font-family: inherit; }
input, textarea { font-family: inherit; }
img { display: block; }

/* keyframes */
@keyframes vk-marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes vk-draw { 0% { stroke-dashoffset: 2000; opacity: 0 } 7% { opacity: .9 } 46% { stroke-dashoffset: 0; opacity: .9 } 80% { opacity: .9 } 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes vk-spin { to { transform: rotate(360deg) } }
@keyframes vk-breathe { 0%, 100% { transform: translate(-50%,-50%) scale(1) } 50% { transform: translate(-50%,-50%) scale(1.045) translateY(-14px) } }
@keyframes vk-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-16px) } }
@keyframes vk-grain { 0% { transform: translate(0,0) } 10% { transform: translate(-4%,-6%) } 20% { transform: translate(-8%,4%) } 30% { transform: translate(6%,-8%) } 40% { transform: translate(-4%,10%) } 50% { transform: translate(-10%,4%) } 60% { transform: translate(8%,6%) } 70% { transform: translate(-6%,-8%) } 80% { transform: translate(10%,-4%) } 90% { transform: translate(-4%,6%) } 100% { transform: translate(0,0) } }
@keyframes vk-rise { from { opacity: 0; transform: translateY(30px) } to { opacity: 1; transform: translateY(0) } }
@keyframes vk-bob { 0%, 100% { transform: translateY(0); opacity: .45 } 50% { transform: translateY(9px); opacity: 1 } }
@keyframes vk-streak { 0% { transform: translateX(-140%) skewX(-16deg) } 100% { transform: translateX(140%) skewX(-16deg) } }
@keyframes vk-slideL { from { transform: translateX(100%) } to { transform: translateX(0) } }
@keyframes vk-slideD { from { transform: translateY(-101%) } to { transform: translateY(0) } }
@keyframes vk-fade { from { opacity: 0 } to { opacity: 1 } }

/* hover states (design's style-hover) */
.btn-hero-solid:hover { background: transparent !important; color: #fff !important; }
.btn-hero-ghost:hover { background: #fff !important; color: #0b0b0c !important; border-color: #fff !important; }
.btn-dark-solid:hover { background: transparent !important; color: #0b0b0c !important; }
.btn-add:hover { background: #0b0b0c !important; color: #fff !important; }
.btn-checkout:hover { opacity: .82; }
.card-img:hover img.img-main { opacity: 0; }
.card-img img.img-alt { opacity: 0; transition: opacity .35s ease; }
.card-img:hover img.img-alt { opacity: 1; }
.feat-card:hover .feat-img { opacity: .92; }

/* image slots (real photos) */
.slot { display: block; width: 100%; overflow: hidden; position: relative; }
.slot > img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: opacity .35s ease; }

/* page routing */
[data-page] { display: none; }
[data-page].active { display: block; }

/* filter chips */
.chip {
  border: 1px solid #dcd8cf; background: transparent; color: #0b0b0c;
  padding: 9px 22px; border-radius: 100px; cursor: pointer;
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; transition: all .25s; white-space: nowrap;
}
.chip.active { border-color: #0b0b0c; background: #0b0b0c; color: #fff; }

/* hero video/poster layer */
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.hero-media video { display: none; }
.hero-media.has-video video { display: block; }
.hero-media.has-video img { display: none; }

/* mobile */
@media (max-width: 560px) {
  header > div { padding: 12px 14px !important; gap: 10px !important; }
  header > div > button:first-child { font-size: 16px !important; }
  header nav { gap: 12px !important; }
  header nav button { font-size: 10px !important; letter-spacing: .14em !important; }
  #vk-btn-search { display: none !important; }
  #vk-btn-cart { font-size: 10px !important; letter-spacing: .14em !important; white-space: nowrap; }
  header nav button span[data-navdot] { bottom: -3px !important; }
  .hero-scroll-hint { display: none !important; }
}
@media (max-width: 379px) {
  header > div { padding: 12px 10px !important; gap: 8px !important; }
  header > div > button:first-child { font-size: 15px !important; }
  header nav { gap: 8px !important; }
  header nav button { letter-spacing: .06em !important; }
  #vk-btn-cart { letter-spacing: .06em !important; }
}

/* touch: tap product image to see 2nd cut (hover swap doesn't exist on touch) */
.card-img.show-alt img.img-main { opacity: 0 !important; }
.card-img.show-alt img.img-alt { opacity: 1 !important; }
.img-dots { display: none; }
@media (hover: none) {
  .img-dots { display: flex; gap: 5px; position: absolute; right: 12px; bottom: 12px; }
  .img-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 4px rgba(0,0,0,.4); }
  .img-dots i:first-child { background: #fff; }
  .card-img.show-alt .img-dots i:first-child { background: rgba(255,255,255,.55); }
  .card-img.show-alt .img-dots i:last-child { background: #fff; }
}

/* cart quantity controls */
.qty-wrap { display: inline-flex; align-items: center; border: 1px solid #dcd8cf; margin-top: 8px; }
.qty-btn {
  border: 0; background: none; cursor: pointer; width: 28px; height: 26px;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px; color: #0b0b0c; line-height: 1;
}
.qty-num { min-width: 24px; text-align: center; font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 600; color: #0b0b0c; font-variant-numeric: tabular-nums; }

/* product detail page */
.pd-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 60px); align-items: start; }
.pd-gallery { display: flex; flex-direction: column; gap: 10px; }
.pd-gallery img { width: 100%; height: auto; display: block; background: #f4f2ec; }
.pd-info { position: sticky; top: 90px; }
@media (max-width: 860px) {
  .pd-grid { grid-template-columns: 1fr; }
  .pd-info { position: static; }
}
.opt-btn {
  border: 1px solid #dcd8cf; background: #fff; color: #0b0b0c; cursor: pointer;
  min-width: 52px; padding: 12px 18px; font-family: 'Archivo', sans-serif;
  font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  transition: all .2s; text-align: center;
}
.opt-btn.active { border-color: #0b0b0c; background: #0b0b0c; color: #fff; }
.opt-btn:hover { border-color: #0b0b0c; }
.opt-btn small { display: block; margin-top: 3px; font-size: 9px; font-weight: 600; letter-spacing: .12em; color: inherit; opacity: .55; }
.pd-label { font-family: 'Archivo', sans-serif; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #9a968c; margin: 0 0 10px; }
.pd-warn { display: none; margin: 10px 0 0; font-family: 'Archivo', sans-serif; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #b3261e; }
.pd-warn.show { display: block; animation: vk-fade .25s ease; }
.pd-table { width: 100%; border-collapse: collapse; font-family: 'Archivo', sans-serif; font-size: 13px; }
.pd-table th { text-align: left; font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #9a968c; padding: 0 8px 12px; }
.pd-table td { border-top: 1px solid #e6e2d9; padding: 13px 8px; color: #0b0b0c; font-variant-numeric: tabular-nums; }
.pd-table td:first-child { font-weight: 700; }
.pd-section { border-top: 1px solid #e6e2d9; padding: clamp(28px, 4vw, 44px) 0 0; margin-top: clamp(28px, 4vw, 44px); }
.pd-section h3 { margin: 0 0 18px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: #0b0b0c; }
.pd-section p, .pd-section li { font-family: 'Archivo', 'Noto Sans KR', sans-serif; font-size: 13px; line-height: 2; color: #3b3a36; letter-spacing: .04em; }
.pd-note { font-family: 'Archivo', sans-serif; font-size: 11px; letter-spacing: .1em; color: #9a968c; line-height: 1.9; }

/* FAQ accordion */
.faq-item { border-bottom: 1px solid #e6e2d9; }
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 22px 0; font-family: 'Noto Sans KR', sans-serif; font-weight: 700;
  font-size: 15px; color: #0b0b0c;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-family: 'Archivo', sans-serif; font-weight: 400; font-size: 20px; color: #9a968c; flex-shrink: 0; transition: transform .2s; }
.faq-item[open] summary::after { content: '−'; }
.faq-item .faq-body { padding: 0 0 24px; font-family: 'Noto Sans KR', sans-serif; font-size: 14px; line-height: 2; color: #3b3a36; }
.faq-item .faq-body a { color: inherit; }

/* accessibility: respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* modal */
.vk-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(11,11,12,.6); backdrop-filter: blur(3px); }
.vk-modal.open { display: flex; animation: vk-fade .25s ease; }
.vk-modal-box { background: #fff; color: #0b0b0c; max-width: 420px; width: calc(100vw - 40px); padding: 36px 32px; text-align: center; }