/* ============================================================
   FUJIFILM · IMC June 2026 Promotion
   wrapper class: .imc-2026-06
   gateway: D:\Claude\fujifilm\docs\content-maintenance\playwith-wide-page.md
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* ---------- variables (wrapper-scoped) ----------
   Palette base: #EDEDE9 #D6CCC2 #F5EBE0 #E3D5CA #D5BDAF (warm neutral / beige).
   Surfaces brightened ~2× per client feedback (2026-05-29) — point greens (#029570) preserved. */
.imc-2026-06{
  --bg: #ffffff;
  --paper: #FAF5EE;        /* near-white cream — section.paper */
  --paper-2: #F5EBE0;      /* soft cream */
  --ink: #2a2a2a;          /* charcoal text (lighter than pure black) */
  --ink-2: #4a4a4a;
  --muted: #8a8074;        /* warm muted */
  --muted-2: #b5a89a;
  --line: #E3D5CA;         /* warm beige hairlines (kept mid-tone for visibility) */
  --line-soft: #EDEDE9;
  --dark: #EDEDE9;         /* "dark" surface — now off-white (was #D5BDAF, brightened ~2×) */
  --dark-2: #F5EBE0;       /* (was #D6CCC2) */
  --dark-3: #FAF5EE;       /* (was #E3D5CA) */
  --on-dark: #2a2a2a;      /* text on light beige stays dark for contrast */
  --on-dark-2: #6a5d52;    /* warm muted on light beige */
  --accent: #029570;       /* Fujifilm green — point color, preserved */
  --accent-on-dark: #029570;
  --max: 1180px;
}

/* ---------- wrapper breakout (playwith wide page) ---------- */
.imc-2026-06{
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  font-family: "Pretendard", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 60em){
  .imc-2026-06{
    width: 100vw !important;
    max-width: 1360px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

/* store-page 컨텍스트 — body 직속 wrapper면 게시판 breakout 해제, 풀-블리드 매장 디스플레이용.
   게시판은 wrapper가 .post__body 안에 있어 이 룰 미적용. */
body > .imc-2026-06{
  width: 100% !important;
  max-width: none !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
}

/* store-page에서 meta-strip 내부 그리드만 1180 가운데 정렬 (다른 섹션과 동일 너비).
   hero는 매장 1920 디스플레이용 와이드 컷(hero-1920.jpg)을 풀-블리드로 노출 — 별도 룰 없음.
   게시판 post-body는 wrapper가 col-xl-6 안에 있어 이미 1180 미만 → 영향 없음. */
body > .imc-2026-06 .meta-strip-grid{
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

/* with-tabs 변형 — 하단 sticky 탭바가 본문 마지막을 가리지 않도록 padding-bottom 확보.
   탭바 그리드는 1180px max로 다른 섹션과 동일 너비 → 셀당 약 385×128 + container padding 24 ≈ 152px. */
.imc-2026-06.with-tabs{
  padding-bottom: 180px;
}
@media (max-width: 980px){
  .imc-2026-06.with-tabs{ padding-bottom: 160px; }
}
@media (max-width: 760px){
  .imc-2026-06.with-tabs{ padding-bottom: 360px; }
}

/* ============ Bottom Tab Bar (store-page --with-tabs 전용) ============
   매장 디스플레이 하단에 항상 노출되는 3-banner navigation. */
.imc-2026-06 .bottom-tab-bar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: #999;
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border-top: 1px solid var(--line);
  padding: 12px;
}
.imc-2026-06 .bottom-tab-bar-grid{
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: var(--max);  /* 1180 — 다른 섹션과 동일 너비, 배경(.bottom-tab-bar)은 풀-블리드 유지 */
  margin: 0 auto;
}
.imc-2026-06 .bottom-tab-item{
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 1;
  background: var(--dark-3);
  text-decoration: none;
  color: inherit;
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 4px 14px rgba(120, 100, 86, 0.18);
}
.imc-2026-06 .bottom-tab-item img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .6s ease, filter .3s ease;
}
.imc-2026-06 .bottom-tab-item:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(120, 100, 86, 0.28);
}
.imc-2026-06 .bottom-tab-item:hover img{
  transform: scale(1.04);
}
.imc-2026-06 .bottom-tab-item:focus-visible{
  outline: 3px solid var(--accent-on-dark);
  outline-offset: 2px;
}

@media (max-width: 760px){
  .imc-2026-06 .bottom-tab-bar{ padding: 8px; }
  .imc-2026-06 .bottom-tab-bar-grid{
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ---------- em reset (사이트 em{color:#029570} override 회피) ---------- */
.imc-2026-06 em{ color: inherit; font-style: italic; }

/* ---------- base ---------- */
.imc-2026-06 *{ box-sizing: border-box; }
.imc-2026-06 img{ display:block; max-width: 100%; }
.imc-2026-06 a{ color: inherit; }

.imc-2026-06 .wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}

/* ============ Brand Bar (store-page 전용 — post-body엔 미사용 dead rule) ============ */
.imc-2026-06 .brand-bar{
  background: var(--dark);
  color: var(--on-dark);
  border-bottom: 1px solid var(--line);
}
.imc-2026-06 .brand-bar-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1.55;
}
.imc-2026-06 .brand-logo{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.imc-2026-06 .brand-logo img{
  height: 24px;
  width: auto;
  display: block;
}
.imc-2026-06 .brand-bar .period{
  justify-self: center;
  color: var(--ink);
}
.imc-2026-06 .brand-bar .limited{
  justify-self: end;
  color: var(--accent-on-dark);
  letter-spacing: 0.24em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.imc-2026-06 .brand-bar .limited::before{
  content: ""; width: 6px; height: 6px;
  background: var(--accent-on-dark);
  display: inline-block;
}

/* ============ HERO ============ */
.imc-2026-06 .hero{
  position: relative;
  background: var(--dark);
  overflow: hidden;
}
.imc-2026-06 .hero-img{
  width: 100%;
  height: auto;
  display: block;
}
.imc-2026-06 .hero-cap{
  background: var(--dark);
  color: var(--on-dark);
  border-bottom: 1px solid var(--line);
}
.imc-2026-06 .hero-cap-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: start;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1.55;
}
.imc-2026-06 .hero-cap b{
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.28em;
}
.imc-2026-06 .hero-cap .period{
  justify-self: center;
  color: var(--ink);
}
.imc-2026-06 .hero-cap .limited{
  justify-self: end;
  color: var(--accent-on-dark);
  letter-spacing: 0.24em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.imc-2026-06 .hero-cap .limited::before{
  content: ""; width: 6px; height: 6px;
  background: var(--accent-on-dark); display: inline-block;
}

/* ============ MAST ============ */
.imc-2026-06 .mast{
  padding: 120px 0 90px;
  background: #fff;
  position: relative;
}
.imc-2026-06 .mast-grid{
  display: grid;
  grid-template-columns: 110px 1fr 320px;
  gap: 56px;
  align-items: end;
}
.imc-2026-06 .mast .num{
  font-family: "Inter", sans-serif;
  font-weight: 200;
  font-size: 96px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.imc-2026-06 .mast .num small{
  display: block;
  margin-top: 12px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  color: var(--muted);
  text-transform: uppercase;
}
.imc-2026-06 .mast h1{
  margin: 0;
  font-family: "Pretendard", sans-serif;
  font-weight: 600;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.imc-2026-06 .mast h1 .sub{
  display: block;
  margin-top: 18px;
  font-family: "Pretendard", sans-serif;
  font-weight: 300;
  font-size: 26px;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--ink-2);
}
.imc-2026-06 .mast .lede{
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.75;
  padding-left: 28px;
  border-left: 1px solid var(--line);
}
.imc-2026-06 .mast .lede b{
  display: block;
  margin-bottom: 8px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ============ Meta strip ============ */
.imc-2026-06 .meta-strip{
  background: var(--dark);
  color: var(--on-dark);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.imc-2026-06 .meta-strip-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-left: 1px solid var(--line);
}
.imc-2026-06 .meta-cell{
  padding: 32px 28px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
  min-height: 130px;
  justify-content: center;
}
.imc-2026-06 .meta-cell .k{
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}
.imc-2026-06 .meta-cell .v{
  font-family: "Pretendard", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.45;
  color: var(--on-dark);
  letter-spacing: -0.005em;
}
.imc-2026-06 .meta-cell .v small{
  display: block;
  margin-top: 4px;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--on-dark-2);
  text-transform: none;
}
.imc-2026-06 .meta-cell.accent .v{ color: var(--accent-on-dark); }

/* ============ Section heads ============ */
.imc-2026-06 .section{
  padding: 120px 0;
  background: #fff;
}
.imc-2026-06 .section.paper{
  background: var(--bg);
}
/* tinted section (goods area per 2026-05-29 feedback) — matches brand-bar bg */
.imc-2026-06 .section.tint{
  background: var(--dark);
}
.imc-2026-06 .section-head{
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 32px;
  align-items: end;
  margin-bottom: 56px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.imc-2026-06 .section-head .idx{
  font-family: "Inter", sans-serif;
  font-weight: 200;
  font-size: 64px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.imc-2026-06 .section-head h2{
  margin: 0;
  font-family: "Pretendard", sans-serif;
  font-weight: 500;
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.imc-2026-06 .section-head h2 .en{
  display: block;
  margin-top: 8px;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.imc-2026-06 .section-head .stamp{
  align-self: end;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
}
.imc-2026-06 .section-head .stamp::before{
  content: ""; width: 28px; height: 1px; background: currentColor;
  display: inline-block;
}

/* ============ Goods grid ============ */
.imc-2026-06 .goods-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.imc-2026-06 .goods-card{
  background: #fff;
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: background .25s ease;
}
.imc-2026-06 .goods-card .frame{
  aspect-ratio: 16 / 10;
  background: var(--paper-2);
  overflow: hidden;
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}
.imc-2026-06 .goods-card .frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .6s ease;
}
.imc-2026-06 .goods-card:hover .frame img{ transform: scale(1.04); }
.imc-2026-06 .goods-card a.frame:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.imc-2026-06 .goods-card .body{
  padding: 32px 32px 36px;
  display: flex; flex-direction: column; gap: 18px;
  flex: 1;
}
.imc-2026-06 .goods-card .cat{
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}
.imc-2026-06 .goods-card h3{
  margin: 0;
  font-family: "Pretendard", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.imc-2026-06 .goods-card h3 .en{
  display: block;
  margin-top: 6px;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.imc-2026-06 .goods-card .price-row{
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.imc-2026-06 .goods-card .price-row .won{
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.imc-2026-06 .goods-card .price-row .won small{
  font-weight: 400; font-size: 13px; color: var(--muted); margin-left: 4px;
}

/* More info button — dark warm brown to harmonize with beige (#EDEDE9) section bg */
.imc-2026-06 .btn-more{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: #6B5544;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid #6B5544;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.imc-2026-06 .btn-more::after{
  content: "→";
  font-family: "Inter", sans-serif;
  font-size: 13px;
  letter-spacing: 0;
  transition: transform .2s ease;
}
.imc-2026-06 .btn-more:hover{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.imc-2026-06 .btn-more:hover::after{ transform: translateX(3px); }

/* ============ Featured products (DARK) ============ */
.imc-2026-06 .feature-stack{
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.imc-2026-06 .feature-main{
  background: var(--bg);
  border: 1px solid var(--line);
  display: grid;
  /* img column = 50% - 7px to align with feature-quad's 2-box edge (4 box * 14px gap × 3 = 50% - 7px) */
  grid-template-columns: calc(50% - 7px) 1fr;
  color: var(--on-dark);
  min-height: 460px;
  position: relative;
}
.imc-2026-06 .feature-main .img-frame{
  background: var(--paper-2);
  overflow: hidden;
  position: relative;
}
.imc-2026-06 .feature-main .img-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .6s ease;
}
.imc-2026-06 .feature-main:hover .img-frame img{ transform: scale(1.04); }
.imc-2026-06 .feature-main .img-frame a{ display:block; width:100%; height:100%; }
.imc-2026-06 .feature-main .img-frame a:focus-visible{
  outline: 2px solid var(--accent-on-dark);
  outline-offset: -2px;
}
.imc-2026-06 .feature-main .body{
  padding: 56px 48px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
}
.imc-2026-06 .feature-main .badge-main{
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  background: var(--accent);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.imc-2026-06 .feature-main .badge-main::before{
  content: ""; width: 6px; height: 6px; background: #fff; display: inline-block;
}
.imc-2026-06 .feature-main .label{
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
}
.imc-2026-06 .feature-main h3{
  margin: 0;
  font-family: "Pretendard", sans-serif;
  font-weight: 500;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--on-dark);
}
.imc-2026-06 .feature-main h3 .en{
  display: block;
  margin-top: 12px;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}
.imc-2026-06 .feature-main .desc{
  font-size: 15px;
  color: var(--on-dark-2);
  line-height: 1.7;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  max-width: 360px;
}

.imc-2026-06 .feature-quad{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.imc-2026-06 .feature-mini{
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 0;
  display: flex;
  flex-direction: column;
  color: var(--on-dark);
}
.imc-2026-06 .feature-mini .img-frame{
  background: var(--paper-2);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.imc-2026-06 .feature-mini .img-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .6s ease;
}
.imc-2026-06 .feature-mini:hover .img-frame img{ transform: scale(1.04); }
.imc-2026-06 .feature-mini .img-frame a{ display:block; width:100%; height:100%; }
.imc-2026-06 .feature-mini .img-frame a:focus-visible{
  outline: 2px solid var(--accent-on-dark);
  outline-offset: -2px;
}
.imc-2026-06 .feature-mini .body{
  padding: 26px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.imc-2026-06 .feature-mini .scope{
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
}
.imc-2026-06 .feature-mini h4{
  margin: 0;
  font-family: "Pretendard", sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--on-dark);
}
.imc-2026-06 .feature-mini .gift-line{
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.imc-2026-06 .feature-mini .gift-line .k{
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
}
.imc-2026-06 .feature-mini .gift-line .v{
  font-family: "Pretendard", sans-serif;
  font-weight: 500;
  font-size: 14.5px;
  color: var(--on-dark);
  line-height: 1.45;
  letter-spacing: -0.005em;
}

/* ============ Channel banner ============ */
.imc-2026-06 .channel{
  padding: 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.imc-2026-06 .channel-grid{
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px 28px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 56px;
  align-items: center;
}
.imc-2026-06 .channel .k{
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.imc-2026-06 .channel h3{
  margin: 0;
  font-family: "Pretendard", sans-serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.4;
}
.imc-2026-06 .channel-list{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.imc-2026-06 .channel-list .ch{
  background: #fff;
  padding: 22px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.imc-2026-06 .channel-list .ch .no{
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--muted);
}
.imc-2026-06 .channel-list .ch .nm{
  font-family: "Pretendard", sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.imc-2026-06 .channel-list .ch .nm small{
  display: block; margin-top: 2px;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============ Cautions (was .notice — 사이트 .post .notice 충돌 회피) ============ */
/* 사이트 룰 강제 무력화: .post .notice{ text-align:center; padding:4rem 2rem; background:#f0f0f0 } */
.imc-2026-06 .cautions{
  text-align: left !important;
  background: transparent !important;
  padding: 0 28px !important;
}
.imc-2026-06 .cautions-body{
  display: grid;
  grid-template-columns: 110px 1fr 320px;
  gap: 56px;
  align-items: start;
}
.imc-2026-06 .cautions ul{
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 14px;
  counter-reset: n;
}
.imc-2026-06 .cautions li{
  position: relative;
  padding-left: 36px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-2);
  counter-increment: n;
  text-align: left;
}
.imc-2026-06 .cautions li::before{
  content: counter(n, decimal-leading-zero);
  position: absolute; left: 0; top: 2px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent);
}
.imc-2026-06 .cautions .contact{
  background: var(--dark);
  color: var(--on-dark);
  padding: 32px 28px;
  border: 1px solid var(--line);
}
.imc-2026-06 .cautions .contact .k{
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin-bottom: 14px;
}
.imc-2026-06 .cautions .contact .num{
  font-family: "Inter", sans-serif;
  font-weight: 200;
  font-size: 38px;
  letter-spacing: -0.005em;
  color: var(--on-dark);
  line-height: 1;
}
.imc-2026-06 .cautions .contact .hr{
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--on-dark-2);
  letter-spacing: 0.04em;
}

/* ============ Responsive ============ */
@media (max-width: 980px){
  .imc-2026-06 .mast{ padding: 80px 0 64px; }
  .imc-2026-06 .mast-grid{
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .imc-2026-06 .mast .num{ font-size: 68px; }
  .imc-2026-06 .mast h1{ font-size: 42px; }
  .imc-2026-06 .mast .lede{ padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--line); }

  .imc-2026-06 .meta-strip-grid{ grid-template-columns: repeat(2, 1fr); }
  .imc-2026-06 .meta-cell{ justify-content: flex-start; }

  .imc-2026-06 .section{ padding: 80px 0; }
  .imc-2026-06 .section-head{
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 36px;
  }
  .imc-2026-06 .section-head .idx{ font-size: 44px; }
  .imc-2026-06 .section-head h2{ font-size: 26px; }

  .imc-2026-06 .goods-grid{ grid-template-columns: 1fr; }
  .imc-2026-06 .feature-main{ grid-template-columns: 1fr; }
  .imc-2026-06 .feature-main .img-frame{ aspect-ratio: 16/10; }
  .imc-2026-06 .feature-main h3{ font-size: 30px; }
  .imc-2026-06 .feature-quad{ grid-template-columns: repeat(2, 1fr); }

  .imc-2026-06 .channel-grid{ grid-template-columns: 1fr; gap: 24px; padding: 40px 24px; }
  .imc-2026-06 .channel-list{ grid-template-columns: repeat(2, 1fr); }

  .imc-2026-06 .cautions-body{ grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 560px){
  .imc-2026-06{ font-size: 15px; }
  .imc-2026-06 .wrap{ padding: 0 18px; }

  .imc-2026-06 .hero-cap-inner{ padding: 16px 18px; gap: 14px; font-size: 10px; align-items: start; }
  .imc-2026-06 .hero-cap-inner .period{ justify-self: center; }
  .imc-2026-06 .hero-cap-inner .limited{ justify-self: end; }

  .imc-2026-06 .brand-bar-inner{ padding: 14px 18px; gap: 14px; font-size: 10px; align-items: start; }
  .imc-2026-06 .brand-logo img{ height: 20px; }

  .imc-2026-06 .mast{ padding: 56px 0 48px; }
  .imc-2026-06 .mast .num{ font-size: 52px; }
  .imc-2026-06 .mast h1{ font-size: 32px; }

  .imc-2026-06 .meta-cell{ padding: 22px 18px; min-height: 0; }
  .imc-2026-06 .meta-cell .v{ font-size: 15.5px; }

  .imc-2026-06 .section{ padding: 64px 0; }
  .imc-2026-06 .goods-card .body{ padding: 24px 22px 28px; }
  .imc-2026-06 .feature-main .body{ padding: 32px 24px; }
  .imc-2026-06 .feature-main h3{ font-size: 24px; }
  .imc-2026-06 .feature-quad{ grid-template-columns: 1fr; }
  .imc-2026-06 .channel-list{ grid-template-columns: 1fr; }
  .imc-2026-06 .cautions{ padding: 0 18px !important; }
  .imc-2026-06 .cautions li{ font-size: 14px; padding-left: 32px; }
  .imc-2026-06 .cautions .contact .num{ font-size: 30px; }
}