/* =========================================
   Global
========================================= */
:root{
  --bg:#fff;
  --text:#111;
  --muted:#58606b;
  --border:#e6e6e9;
  --accent:#111;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:15px/1.7 system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans KR",sans-serif;
}

/* =========================================
   Header / Common layout
========================================= */
.site-header{ background:#fff; border-bottom:1px solid var(--border); }
.brand{ margin:0; padding:12px 20px; font-weight:800; letter-spacing:.2px; }

.wrap{ width:min(1400px,94%); margin:16px auto 40px; }

/* Index: two columns (left images / right text) */
.grid-LR{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:24px;
}
@media (max-width:1024px){
  .grid-LR{ grid-template-columns:1fr; }
}

/* Two photos row (left area) */
.duo-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media (max-width:640px){
  .duo-row{ grid-template-columns:1fr; }
}

.photo{ position:relative; display:block; overflow:hidden; }
.photo img{
  display:block;
  width:100%;
  height:auto;                 /* keep ratio */
  border:1px solid var(--border);
  background:#f7f7f8;
}

/* Caption under image */
.caption{ margin:10px 0 0; font-size:13px; }

/* Right info panel */
.info{ border-left:1px solid var(--border); padding-left:16px; }
.info-body p{ margin:10px 0; }

/* CONTACT small */
.info-body .contact{
  font-size:13px; line-height:1.6; color:var(--muted); margin-top:14px;
}
.info-body .contact .label{
  font-size:11px; letter-spacing:.8px; font-weight:800; color:#8a8f98;
}

/* CTA badge (thin grey) */
.rotating-link{ position:relative; display:block; }
.cta-badge{
  position:absolute; right:12px; bottom:12px;
  padding:6px 10px;
  border-radius:8px;
  background:transparent;
  border:1px solid #e5e7eb;
  color:#6b7280;
  font-weight:400;
  font-size:12px;
  letter-spacing:.1px;
  box-shadow:none;
  transition:color .15s ease, border-color .15s ease, transform .15s ease;
}
.rotating-link:hover .cta-badge{
  color:#4b5563;
  border-color:#d1d5db;
  transform:translateY(-1px);
}

/* =========================================
   Fixed mini video (sharp corners)
========================================= */
.mini-float{
  position:fixed; right:24px; bottom:24px; z-index:9999;
  width:220px;
  border:1px solid var(--border);
  border-radius:0;                /* no round */
  overflow:hidden;
  background:#000;
  box-shadow:0 6px 30px rgba(0,0,0,.08);
}
.mini-float .mini-video{ display:block; width:100%; height:auto; }
@media (max-width:640px){
  .mini-float{ right:12px; bottom:12px; width:150px; }
}

/* =========================================
   Project page: header / blocks
========================================= */
.head{ width:min(1000px,94%); margin:16px auto 0; }
.title{ margin:6px 0 2px; font-size:26px; font-weight:800; }
.meta{ margin:0; color:var(--muted); }
.price{ margin:6px 0 12px; font-weight:800; }

/* Centered blurb block */
.blurb{ width:min(1000px,94%); margin:18px auto 12px; padding:24px 12px; background:#fff; }
.blurb .text{
  max-width:720px; margin:0 auto; text-align:center;
  line-height:1.45; letter-spacing:.1px; font-size:15px; color:#222;
}
.blurb .text p{ margin:10px 0; }
@media (max-width:640px){ .blurb .text{ font-size:13px; } }

/* Project page image grid */
.grid{
  width:min(1000px,94%);
  margin:8px auto 24px;
  display:grid;
  gap:12px;
  grid-template-columns:1fr 1fr;
}
.grid img{
  width:100%; height:auto; display:block;
  border:1px solid var(--border);
  background:#f7f7f8;
}
@media (max-width:900px){ .grid{ grid-template-columns:1fr; } }

/* =========================================
   Order form
========================================= */
.order{ width:min(1000px,94%); margin:24px auto 40px; padding:16px; border-top:1px solid var(--border); }
.order h2{ margin:0 0 10px; font-size:20px; }
.order .note{ margin:0 0 12px; color:var(--muted); }

.form{ display:grid; gap:12px; }
.row{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
@media (max-width:640px){ .row{ grid-template-columns:1fr; } }

label{ font-weight:600; font-size:14px; }
input,select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; font:inherit; background:#fff;
}
textarea{ min-height:90px; resize:vertical; }

/* Shipping (card type, one line) */
.ship-group{
  display:grid; gap:10px; padding-top:6px; grid-template-columns:1fr;
}
@media (min-width:900px){ .ship-group{ grid-template-columns:1fr 1fr; } }

.ship-option{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  line-height:1.2;
  cursor:pointer;
  white-space:nowrap; word-break:keep-all; /* keep one line */
}
.ship-option input{
  accent-color:#111;
  transform:scale(.85);
  flex:0 0 18px;
  margin-right:6px;
}
.ship-option .ship-name{ font-weight:700; }
.ship-option .ship-price{ margin-left:auto; font-weight:700; }

/* Total & buttons */
.total{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border:1px dashed var(--border); border-radius:10px; background:#fafafa; font-weight:700;
}
.btn{
  appearance:none; border:none; border-radius:12px;
  padding:12px 16px; background:var(--accent); color:#fff; font-weight:800; cursor:pointer;
}
.btn:active{ transform:translateY(1px); }
.helper{ color:var(--muted); font-size:13px; }

/* Modal */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.4); padding:16px; z-index:50; }
.modal-card{ width:min(560px,100%); background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px; }
.modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.modal-head h3{ margin:0; font-size:18px; }
.x{ border:none; background:transparent; font-size:20px; cursor:pointer; }
.dl{ display:grid; grid-template-columns:110px 1fr; gap:8px; margin:0 0 12px; }
.dl dt{ color:var(--muted); }
.tagbtn{ border:1px solid var(--border); border-radius:10px; padding:6px 10px; background:#fafafa; cursor:pointer; }
.actions{ display:flex; gap:10px; flex-wrap:wrap; }
.link{ display:inline-block; border:1px solid var(--border); border-radius:10px; padding:10px 14px; color:#111; text-decoration:none; }

/* =========================================
   Horizontal inside slider (project)
   - full width look, images keep ratio
   - no rounded border, no card edge
   - native scrollbar hidden
   - right tiny triangle button
========================================= */
.inside{ width:min(1000px,94%); margin:24px auto 8px; position:relative; }

.inside-strip{
  display:flex; gap:16px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;                    /* Firefox hide */
}
.inside-strip::-webkit-scrollbar{ display:none; }  /* WebKit hide */

/* each slide (1장씩 보이게) */
.inside-item{
  flex:0 0 86%;
  max-width:86%;
  scroll-snap-align:start;
}
@media (min-width:1024px){
  .inside-item{ flex-basis:60%; max-width:60%; }
}

/* image inside slide: sharp rectangle, no border */
.inside-item img{
  display:block;
  width:100%;
  height:auto;
  border:none;
  border-radius:0;
  background:transparent;
}

/* Right tiny triangle button (inside-next) */
.scroll-hint{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  z-index:5;
  outline:none;
}
.scroll-hint:focus-visible{
  outline:2px solid rgba(179,73,47,.33);
  outline-offset:2px;
}
/* make sharp triangle (pointing right) */
.scroll-hint::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-40%,-50%);
  width:0; height:0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:11px solid rgba(179,73,47,.8);   /* #b3492f @ 80% */
}
.scroll-hint:hover{ opacity:.95; }
.scroll-hint.is-hidden{ opacity:0; pointer-events:none; }

/* Caption below slider — same feel as blurb */
.inside-caption{
  width:min(1000px,94%);
  margin:10px auto 28px;
  text-align:center;
  color:#222;
  line-height:1.45;
  font-size:15px;
}
@media (max-width:640px){ .inside-caption{ font-size:13px; } }

/* =========================================
   Top image full width (home hero)
========================================= */
.top-image{ display:block; width:100%; height:auto; }
/* ===== 가로형 미디어 – 세로 스택(스크롤 스냅) ===== */
.wide-stack{
  width: min(1000px, 94%);
  margin: 18px auto 28px;
  /* 스크롤로 내려갈 때 아이템 시작점에 ‘툭’ 붙도록 */
  scroll-snap-type: y proximity;  /* mandatory 로 바꾸면 더 강하게 붙음 */
  overscroll-behavior: contain;   /* 상/하단 튐 방지 */
}

.stack-item{
  margin: 0 0 18px;
  scroll-snap-align: start;       /* 각 아이템의 시작 지점에 스냅 */
  /* 한 화면에 거의 ‘한 장’ 보이도록 높이를 살짝 확보(조절 가능) */
  min-height: 60vh;
  display: flex;
  align-items: center;            /* 이미지/영상 수직 가운데 */
  justify-content: center;
}

.stack-media{
  display: block;
  width: 100%;
  height: auto;                   /* 가로 비율 유지 */
  background: #000;               /* 영상 로딩 전 검정 */
  border: 0;
  outline: 0;
}

/* 데스크톱에선 한 장 느낌을 조금 더 강조하고 싶다면 높이를 키우세요 */
@media (min-width: 900px){
  .stack-item{ min-height: 70vh; }
}
/* ===== 모바일에서 배송 방법 라벨이 박스 밖으로 나가는 문제 수정 ===== */
.ship-group{ width:100%; }                 /* 부모 폭 꽉 채우기 */

.ship-option{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  overflow:hidden;                         /* 넘치는 내용 숨김 */
  white-space:normal;                      /* 줄바꿈 허용 (기존 nowrap 해제) */
  word-break:break-word;                   /* 한글도 줄바꿈 가능 */
}

.ship-option input{
  flex:0 0 auto;
  transform:scale(.9);
  margin-right:8px;
}

.ship-option .ship-name{
  flex:1 1 auto;                           /* 가운데 텍스트는 남은 공간을 차지 */
  min-width:0;                             /* 사파리에서 flex 항목 줄어들 수 있게 */
}

.ship-option .ship-price{
  flex:0 0 auto;
  margin-left:auto;                        /* 가격은 항상 오른쪽으로 */
}

/* 폰 화면에서 살짝 더 여유 있게 */
@media (max-width: 420px){
  .ship-option{ padding:12px; }
  .ship-option .ship-name,
  .ship-option .ship-price{ font-size:14px; }
}
/* ===== 모바일 배송 방법 라벨 텍스트가 보이지 않는 문제 강제 복구 ===== */
.ship-option{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:52px;              /* 높이 확보 */
  padding:12px 14px;
  color:#111 !important;        /* 글자색 강제 */
  background:#fff;
  overflow:hidden;              
  white-space:normal;           /* 줄바꿈 허용 */
  word-break:break-word;
}

.ship-option input{
  flex:0 0 auto;
  transform:scale(.9);
  margin-right:8px;
}

.ship-option .ship-name,
.ship-option .ship-price{
  display:block;                /* iOS에서 0폭 되는 문제 방지 */
  visibility:visible !important;
  opacity:1 !important;
  line-height:1.25;
  color:#111 !important;        /* 상속으로 투명해지는 경우 방지 */
}

.ship-option .ship-name{
  flex:1 1 auto;                /* 가운데 텍스트는 남은 공간 차지 */
  min-width:0;                  /* Safari에서 수축 가능하게 */
}

.ship-option .ship-price{
  flex:0 0 auto;
  margin-left:auto;             /* 오른쪽 정렬 */
}

/* 아주 작은 화면에서 글자 크기 조정 */
@media (max-width:420px){
  .ship-option .ship-name,
  .ship-option .ship-price{ font-size:14px; }
}