*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  font-family:"Noto Sans KR", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(300px 180px at 0% 0%, rgba(36,50,71,.06), rgba(255,255,255,0) 72%),
    linear-gradient(180deg, #F4F5F1, #F4F5F1);
  line-height:1.55;
  letter-spacing:-0.1px;
}

a{ color:inherit; text-decoration:none; }

img{ display:block; max-width:100%; height:auto; }

button,input,select{ font:inherit; }

.icon svg{ width:18px; height:18px; }

.caret{ width:14px; height:14px; opacity:.75; }

.hero{ background:var(--accent); position:relative; }

.hero-slider{
  position:relative;
  width:100%;
  height: clamp(620px, 62vh, 760px);
  overflow:hidden;
}

.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition: opacity .45s ease;
}

.hero-slide.is-active{ opacity:1; pointer-events:auto; }

.hero-media{ position:absolute; user-select:none; pointer-events:none; }

.hero-media--cover{ inset:0; width:100%; height:100%; object-fit:cover; }

.hero-media--origin{ left:50%; top:50%; transform: translate(-50%, -50%); width:auto; height:auto; max-width:none; max-height:none; }

.hero-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.10));
}

.hero-inner{ position:relative; height:100%; display:flex; align-items:center; }

.hero-copy{ position:relative; z-index:2; max-width:620px; color:#fff; }

.hero-copy h1{
  margin:0 0 10px;
  font-weight:900;
  line-height:1.05;
  font-size: clamp(40px, calc(2.8vw * var(--hero_scale)), 78px);
  text-shadow: 0 10px 28px rgba(0,0,0,.25);
}

.hero-copy p{
  margin:0;
  font-weight:700;
  color: rgba(255,255,255,.92);
  text-shadow: 0 10px 28px rgba(0,0,0,.25);
}

.hero-arrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.86);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  transition: opacity .15s ease;
  z-index:3;
}

.hero-arrow svg{ width:18px; height:18px; }

.hero-arrow.prev{ left:18px; }

.hero-arrow.next{ right:18px; }

.hero-slider:hover .hero-arrow{ opacity:1; }

.hero-dots{
  position:absolute;
  left:50%;
  bottom:18px;
  transform: translateX(-50%);
  display:flex;
  gap:10px;
  z-index:3;
}

.hero-dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background: rgba(255,255,255,.55);
  border:0;
  padding:0;
  cursor:pointer;
}

.hero-dot.is-active{ background: rgba(255,255,255,.95); }

.hub{
  background:
    radial-gradient(780px 320px at 0% 0%, rgba(47,143,123,.14), rgba(47,143,123,0) 60%),
    radial-gradient(760px 320px at 100% 10%, rgba(36,50,71,.10), rgba(36,50,71,0) 60%),
    linear-gradient(180deg, #f6fbfa, #eef4f2 58%, #f7f8f4);
  padding:16px 0 24px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

.hub-inner{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}

.hub-card{
  --hub-solid:#d9a66b;
  --hub-mid:#bf7c57;
  --hub-deep:#895959;
  --hub-accent: rgba(255,245,226,.14);
  --hub-accent-strong: rgba(255,239,203,.24);
  --hub-shadow: rgba(102,70,58,.20);
  --hub-glow: rgba(255,232,179,.22);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  min-height:148px;
  padding:8px 14px;
  color:#fff;
  background:
    radial-gradient(170px 170px at 16% 14%, var(--hub-accent-strong), rgba(255,255,255,0) 60%),
    radial-gradient(220px 180px at 88% 88%, var(--hub-accent), rgba(255,255,255,0) 62%),
    linear-gradient(148deg, var(--hub-solid) 0%, var(--hub-mid) 52%, var(--hub-deep) 100%);
  box-shadow: 0 16px 32px var(--hub-shadow);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  will-change:transform, filter;
}

.hub-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 34%),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,0) 60%);
  pointer-events:none;
}

.hub-card::after{
  content:"";
  position:absolute;
  left:-34px;
  bottom:-56px;
  width:150px;
  height:150px;
  border-radius:999px;
  background: radial-gradient(circle, var(--hub-glow), rgba(255,255,255,0) 70%);
  filter:blur(10px);
  opacity:.74;
  pointer-events:none;
}

.hub-card:hover{
  box-shadow: 0 20px 40px var(--hub-shadow);
}

.hub-card:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.32),
    0 20px 40px var(--hub-shadow);
}

.hub-bg-icon{
  position:absolute;
  right:-10px;
  bottom:-10px;
  width:150px;
  height:150px;
  opacity:.16;
  color:#fff;
  pointer-events:none;
  transform-origin:75% 75%;
  will-change:transform, opacity;
  mix-blend-mode:soft-light;
}

.hub-bg-icon svg{
  width:100%;
  height:100%;
}

.hub-card-head{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-width:0;
}

.hub-icon-main{
  margin-top:0;
  width:58px;
  height:58px;
  border-radius:8px;
  background: rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.20);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  transform-origin:center center;
  will-change:transform, opacity, filter;
  backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 10px 22px rgba(0,0,0,.18);
}

.hub-icon-main svg{
  width:28px;
  height:28px;
}

.hub-title{
  margin:0;
  font-weight:900;
  font-size:23px;
  line-height:1.08;
  letter-spacing:-0.7px;
  z-index:2;
  transform-origin:left center;
  will-change:transform, opacity;
  max-width:none;
}

.hub-btn{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:108px;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(255,255,255,.94);
  color:#0f172a;
  border:1px solid rgba(255,255,255,.52);
  font-size:13px;
  letter-spacing:-0.25px;
  font-weight:900;
  z-index:2;
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
  transform-origin:left center;
  will-change:transform, box-shadow, opacity;
  transition: background .18s ease, box-shadow .18s ease;
}

.hub-card:hover .hub-btn{
  background:#fff;
  box-shadow: 0 16px 28px rgba(0,0,0,.22);
}

.hub-card--open{
  --hub-solid:#79b5a7;
  --hub-mid:#4a8f80;
  --hub-deep:#2f6d62;
  --hub-accent: rgba(227,248,241,.16);
  --hub-accent-strong: rgba(201,235,226,.28);
  --hub-shadow: rgba(46,92,84,.20);
  --hub-glow: rgba(186,232,220,.22);
}

.hub-card--docs{
  --hub-solid:#8da7bf;
  --hub-mid:#607a95;
  --hub-deep:#425a72;
  --hub-accent: rgba(233,241,248,.15);
  --hub-accent-strong: rgba(205,220,233,.26);
  --hub-shadow: rgba(66,85,107,.20);
  --hub-glow: rgba(193,215,235,.20);
}

.hub-card--case{
  --hub-solid:#c2a2a8;
  --hub-mid:#9a767e;
  --hub-deep:#6f555e;
  --hub-accent: rgba(248,239,241,.14);
  --hub-accent-strong: rgba(232,213,217,.26);
  --hub-shadow: rgba(99,77,84,.20);
  --hub-glow: rgba(228,208,214,.18);
}

.kick-full{
  background: radial-gradient(1200px 600px at 20% 20%, rgba(47,143,123,.18), rgba(31,43,58,0) 60%),
              linear-gradient(180deg, #1F2B3A, #17212E);
  color: rgba(255,255,255,.92);
  padding:31px 0;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.kick-full-inner{ position:relative; }

.kick-full-inner::before{
  content:"";
  position:absolute;
  left:-16px;
  top:0;
  bottom:0;
  width:6px;
  border-radius:999px;
  background: var(--kick_red);
  box-shadow: 0 0 0 6px var(--kick_red_glow);
}

.kick-full-top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
}

.kick-pill{
  display:inline-flex;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight:900;
  font-size:11px;
  color: rgba(255,255,255,.88);
}

.kick-full-title{
  margin:9px 0 5px;
  font-size:27px;
  line-height:1.12;
  letter-spacing:-0.6px;
  font-weight:900;
}

.kick-full-sub{
  margin:0;
  font-size:14px;
  font-weight:800;
  color: rgba(255,255,255,.78);
}

.kick-tags{
  margin-top:11px;
  display:flex;
  gap:9px;
  flex-wrap:wrap;
}

.tag{
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight:900;
  font-size:11px;
}

.kick-full-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:9px;
  min-width:200px;
}

.kick-minilink{
  font-weight:900;
  font-size:12px;
  color: rgba(255,255,255,.78);
}

.kick-minilink:hover{ text-decoration: underline; color:#fff; }

.kick-pack-row{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:11px;
}

.kick-pack{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius:8px;
  padding:13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:11px;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.kick-pack:hover{
  transform: translateY(-1px);
  border-color: rgba(47,143,123,.40);
  background: rgba(255,255,255,.06);
}

.kp-name{ font-weight:900; font-size:14px; letter-spacing:-0.2px; color:#fff; }

.kp-desc{ font-weight:800; color: rgba(255,255,255,.70); font-size:12px; }

.best{ background:#fff; padding:38px 0 48px; }

.best-inner{ max-width:var(--container); width:calc(100% - 40px); margin:0 auto; }

.best-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:18px; }

.best-head h2{ margin:0; font-size:22px; letter-spacing:-0.3px; }

.best-link{ font-weight:800; font-size:13px; color:var(--muted); }

.best-link:hover{ text-decoration: underline; color:#111; }

.best-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px 18px; }

.best-item{ text-align:center; padding:8px 4px; transition: transform .16s ease; }

.best-img{ width:100%; height:150px; object-fit: contain; background:transparent; transition: transform .18s ease; }

.best-name{ margin-top:10px; font-weight:900; font-size:14px; }

.best-price{ margin-top:6px; font-weight:900; font-size:13px; }

.best-price.cash{ color: var(--price_red); }

.best-price.quote{ color: var(--quote_green); }

.best-item:hover{ transform: translateY(-2px); }

.best-item:hover .best-img{ transform: scale(1.05); }

.best-item:hover .best-name{ text-decoration: underline; }

.featured{ padding:44px 0; }

.section-head h2{ margin:0 0 6px; font-size:22px; letter-spacing:-0.3px; }

.section-head p{ margin:0 0 18px; }

.feature-stack{ display:flex; flex-direction:column; gap:18px; }

/* after — 한 변 길이를 변수 하나로. 가로·세로 둘 다 이 값이라 정사각형 */
.feature-block{
  --theme: 37,99,235;
  --side: 360px;
  position:relative;
  display:grid;
  grid-template-columns: var(--side) 1fr;
  grid-template-rows: var(--side);        /* 높이 고정 → 오른쪽이 길어도 안 늘어남 */
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 16px 34px rgba(36,50,71,.05);
}

.feature-block::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:8px;
  background: rgba(var(--theme), 1);
  z-index:5;
  pointer-events:none;
}

.feature-block--t1{ --theme: 47,143,123; }

.feature-block--t2{ --theme: 36,50,71; }

.feature-block--t3{ --theme: 81,127,119; }

.feature-block--t4{ --theme: 99,128,149; }

.feature-left,
.feature-right{ position:relative; z-index:1; }

.feature-left{ overflow:hidden; }

.feature-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; }

.feature-left::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.55)); z-index:1; }

.feature-overlay{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:18px; z-index:2; }

.feature-overlay h3{ margin:0; color:#fff; font-size:34px; font-weight:900; letter-spacing:-0.6px; line-height:1.05; text-shadow: 0 14px 30px rgba(0,0,0,.35); }

/* after — 고정 높이 안에서 넘치는 건 잘라냄 (카드 높이 맞춘 뒤엔 안 잘림) */
.feature-right{ padding:0 22px 22px; display:flex; flex-direction:column; gap:12px; min-height:0; overflow:hidden; }

.feature-headbar{
  background:transparent;
  padding:16px 0 14px;
  margin:0 0 10px;
  border-bottom:1px solid rgba(var(--theme), .12);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.feature-headbar .strong{
  font-weight:900;
  font-size:15px;
  color:rgba(var(--theme), .96);
}

.mini-link{ font-weight:800; font-size:12px; color:rgba(var(--theme), .84); }

.mini-link:hover{ text-decoration: underline; color:#111; }

/* after — 4열, 간격 축소. 카드 폭이 줄어 이미지도 같이 작아짐 */
/* align-items 기본값(stretch) — 카드가 행 높이만큼 늘어나야 가격이 바닥 정렬됨 */
.feature-products{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:14px; }

.prod-item{ display:block; text-align:center; padding:0 4px 6px; transition: transform .16s ease; }

/* after — 높이 축소 + 사진 둘레 여백 축소 */
.prod-img{
  width:100%;
  height:100px;
  object-fit: contain;
  padding:0;
  border-radius:8px;
  background:
    radial-gradient(140px 96px at 82% 14%, rgba(var(--theme), .16), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #EEF7F3, #FAFCFB 72%);
  box-shadow: inset 0 0 0 1px rgba(var(--theme), .08);
  transition: transform .18s ease, box-shadow .18s ease;
}

.prod-img--label{
  padding:10px;
  background:
    linear-gradient(180deg, #FFFFFF, #F7F8F6 72%);
  box-shadow: inset 0 0 0 1px rgba(36,50,71,.10);
}

.prod-name{
  margin-top:3px;
  font-weight:900;
  font-size:15px;
  color:#0B1324;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

.prod-price{ margin-top:6px; font-weight:900; font-size:13px; }

.prod-price.cash{ color: var(--price_red); }

.prod-price.quote{ color: var(--quote_green); }

.prod-item:hover{ transform: translateY(-2px); }

.prod-item:hover .prod-img{
  transform: scale(1.04);
  box-shadow:
    inset 0 0 0 1px rgba(var(--theme), .16),
    0 16px 28px rgba(36,50,71,.08);
}

.prod-item:hover .prod-name{ text-decoration: underline; }

.info{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; padding:28px 0; }

.info-inner{ max-width:1062px; width: calc(100% - 40px); margin:0 auto; }

.info-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:0; align-items:stretch; }

.info-item{ padding:18px 18px; min-height:120px; display:flex; flex-direction:column; justify-content:center; text-align:center; }

.info-item + .info-item{ border-left:1px solid var(--line); }

.info-title{ font-weight:900; font-size:17px; margin-bottom:8px; letter-spacing:-0.2px; }

.info-desc{ color:var(--muted); font-weight:700; font-size:14px; }

.kakao-id{ color:var(--accent); font-weight:900; }

@media (max-width: 980px){
  .hub-inner{ grid-template-columns: 1fr; }
  .hub-card{
      min-height:144px;
      padding:8px 14px;
    }
  .hub-icon-main{
      width:54px;
      height:54px;
      margin-top:0;
    }
  .hub-icon-main svg{
      width:26px;
      height:26px;
    }
  .hub-title{
      max-width:none;
      font-size:21px;
    }
  .hub-btn{
      min-width:104px;
      padding:10px 14px;
    }
  .hub-bg-icon{
      width:118px;
      height:118px;
      right:-8px;
      bottom:-8px;
      opacity:.18;
    }
  .kick-full-top{ flex-direction:column; align-items:flex-start; }
  .kick-full-actions{ align-items:flex-start; min-width:0; }
  .kick-pack-row{ grid-template-columns: 1fr; }
  .kick-full-inner::before{ left:0; }
  .best-grid{ grid-template-columns: repeat(2, 1fr); gap:12px 14px; }
/* after — 모바일은 위아래로 쌓이니 사진만 정사각형, 상품은 자동 높이 */
  .feature-block{ grid-template-columns: 1fr; grid-template-rows: var(--side) auto; }
  .feature-block::before{ width:6px; }
/* after — 모바일은 2열 유지, 간격만 맞춤 */
  .feature-products{ grid-template-columns: repeat(2, 1fr); gap:14px; }
  .prod-img, .best-img{ height:150px; }
  .info-grid{ grid-template-columns: 1fr; }
  .info-item{ text-align:left; min-height:auto; padding:18px 0; }
  .info-item + .info-item{ border-left:0; border-top:1px solid var(--line); }
}

@media (max-width: 560px){
  .best-grid{ grid-template-columns: 1fr; }
  .hub-title{ font-size:21px; }
  .hub-btn{
      width:100%;
      min-width:0;
      justify-content:space-between;
    }
}

/* ============================================================
   featured 배너 오버레이 — 글자 겹침 해결 + 외곽선
   목업은 h3 하나만 있는 자리라 sub 가 들어가면 겹친다.
   세로로 쌓고, 배경 사진 위에서도 읽히게 테두리를 준다.
   ============================================================ */

/* 가로 배치 → 세로 쌓기. sub 가 위, title 이 아래 */
.feature-overlay{
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  gap:6px;
}

/* ============================================================
   featured 안의 상품카드 축소
   왼쪽 사진이 정사각(360)이라 오른쪽 가용 높이 ≈ 275px.
   card.css 기본값(이미지 218 + 여백)으론 잘려서 여기서만 덮어쓴다.
   ============================================================ */
.feature-products .doiti-product-card__visual{
  min-height:0;
  aspect-ratio:auto;
  height:150px;               /* 218 → 130 */
  padding:6px;                /* 28/20/18 → 6 */
}
.feature-products .doiti-product-card__visual img{
  max-width:none;
  height:118px;               /* 178 → 118 (박스 130 − 패딩 12) */
}
.feature-products .doiti-product-card__body{
  gap:4px;
  padding-top:8px;            /* 15 → 8 */
  /* 최소 높이 확보 — 이름 3줄 + 가격줄 기준.
     내용이 짧아도 가격(margin-top:auto)이 이 높이의 바닥에 붙어서
     섹션마다 가격 위치가 통일됨. 넘치면 자연스럽게 더 내려감.
     눈으로 보고 88~100 사이에서 조정 */
  min-height:100px;
}
.feature-products .doiti-product-card__name{
  font-size:15px;
}
.feature-products .doiti-product-card__meta{
  min-height:0;               /* 42 고정 해제 */
}
.feature-products .doiti-product-card__price{
  font-size:17px;
  padding-top:2px;
}