@charset "utf-8";

/* ============================================================
   product-calendar.css — 카렌다 전용 PDP
   - 기존 PC calendar goodsSpec 의 정보 배열을 반응형으로 정리
   - 680px 미만 1단, 680px 이상 [large 이미지 | 상품정보] 2단
   - 768px급 PC 폭에서는 왼쪽 이미지 칸 410px
   - large 는 원본보다 확대하지 않고 화면이 좁을 때만 비례 축소

   [특정성 원칙]
   기본 배치는 .c-cal-pcform dt / dd (0,1,1) 로 잡혀 있으므로,
   개별 항목 수식은 반드시 dt./dd. 를 앞에 붙여 (0,2,1) 로 만든다.
   !important 는 쓰지 않는다.

   [상위 파일과의 관계]
   2단 그리드 자체(grid-template-columns, column-gap, align-items)는
   product.css 의 @media(min-width:680px) .l-main.l-pdp 가 이미 준다.
   여기서는 각 칸의 배치만 재지정한다.
   ============================================================ */

/* ── 상품명: PC 폼처럼 이미지/정보 위 전체폭 ───────────── */
.c-cal-pdp-title{
  margin:0;
  padding:10px var(--space-3) 0px 28px;
  background:#fff;
  color:#20242a;
  font-size:19px;
  line-height:1.35;
  letter-spacing:-.03em;
  font-weight:700;
  word-break:keep-all;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 8px;
}
.c-cal-pdp-title__name{
  min-width:0;
}
.c-cal-pdp-event-badge{
  flex:0 0 auto;
  white-space:nowrap;
}

/* ── 상단 large 대표이미지 ─────────────────────────────── */
.c-cal-pdp-media{
  min-width:0;
  box-sizing:border-box;
  background:#fff;
  padding:10px var(--space-3) 14px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.c-cal-pdp-media__inner{
  width:100%;
  box-sizing:border-box;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.c-cal-pdp-media img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  margin:0 auto;
}

/* ── PC 폼형 상품정보 ─────────────────────────────────── */
.c-calendar-pdp .l-pdp-info.c-cal-pdp-info{
  padding:10px var(--space-3) 18px;
}
.c-calendar-pdp .c-pdp-status--soldout{
  margin: 5px 15px 20px;
  font-size: 15px;
}
.c-cal-pcform{
  margin:0;
  display:grid;
  grid-template-columns:70px minmax(0,1fr);
  align-items:baseline;
}
.c-cal-pcform dt,
.c-cal-pcform dd{
  box-sizing:border-box;
  margin:0;
  padding:2px 0;
  border:0;
  font-weight: 600;
  font-size:15px;
  line-height:1.5;
}
.c-cal-pcform dt{
  padding-right:10px;
  text-align:right;
  color:#70767d;
  font-size:12px;
  font-weight:500;
  letter-spacing:-.025em;
  white-space:nowrap;
}
.c-cal-pcform dd{
  padding-left:8px;
  color:#222;
  word-break:keep-all;
}
dd.c-cal-pcform__name{
  font-weight:600;
  font-size:15px;
}

/* 가격: PC처럼 정가는 참고값으로 작게, 특별할인가는 같은 줄에서 주가격으로 강조.
   라벨 세로 위치는 .c-cal-pcform 의 align-items:baseline 이 맞춰준다. */
.c-cal-pcform__price{
  white-space:nowrap;
}
.c-cal-pcform__price--main{
  display:flex;
  align-items:baseline;
}
.c-cal-pcform__norm-price{
  color:#8b9096;
  font-size:14px;
  font-weight:400;
  text-decoration:line-through;
  letter-spacing:-.02em;
}
.c-cal-pcform__sale-label{
  margin-left:14px;
  margin-right:5px;
  color:#ef6c28;
  font-size:11px;
  font-weight:500;
  letter-spacing:-.03em;
}
.c-cal-pcform__sale-price{
  color:#ef6c28;
  font-size:18px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.035em;
}
.c-cal-pcform__sale-unit{
  margin-left:1px;
  color:#ef6c28;
  font-size:13px;
  font-weight:700;
}
dt.c-cal-pcform__event-label{
  color:#c9302c;
  font-weight:600;
}
dd.c-cal-pcform__price--event{
  color:#c9302c;
}
.c-cal-pcform__price--event small{
  margin-right:5px;
  font-size:14px;
  font-weight:600;
}
.c-cal-pcform__price--event strong{
  font-size:18px;
  line-height:1;
  letter-spacing:-.03em;
}
dd.c-cal-pcform__price--qty{
  color:var(--accent-price);
  font-size:15px;
  font-weight:800;
}

/* 배송정보 — 이 줄만 구분선을 얹는다.
   구분선은 dt/dd 두 칸에 나뉘어 그려지므로 위쪽 모서리가 반드시 같아야 한다.
   격자 기본값이 align-items:baseline 이라 그대로 두면 글자 크기/여백이 바뀔 때마다
   두 조각의 높이가 어긋난다. 이 줄만 stretch 로 되돌려 모서리를 붙인다. */
dt.c-cal-pcform__shipping-label,
dd.c-cal-pcform__shipping{
  align-self:stretch;
  margin-top:10px;
  padding-top:12px;
  border-top:1px solid rgba(0,0,0,.09);
}
dd.c-cal-pcform__shipping{
  color:#b1471f;
  font-size:14px;
  font-weight:500;
  line-height:1.4;
}
dd.c-cal-pcform__shipping span{
  display: inline-block;
  margin-top:3px;
  color: #555;
}
/* 교회명 인쇄안내는 오른쪽 상품설명 영역 안에서 dt/dd 구분 없이 전체 폭으로 표시한다.
   기존 print.jpg 는 사용하지 않고 같은 내용을 반응형 HTML로 표시한다. */
.c-cal-print-guide-section{
  box-sizing:border-box;
  width:100%;
  margin:12px 0 0;
  padding:8px 0 0;
  background:#fff;
  color:#30363c;
}
.c-cal-print-guide-section h2{
  margin:0 0 8px;
  color:#2f3439;
  font-size:15px;
  line-height:1.4;
  font-weight:600;
  letter-spacing:-.025em;
}
.c-cal-print-guide-fee{
  margin:0 0 13px;
  padding:10px 12px;
  border-radius:7px;
  background:#f6f8fa;
  color:#50575e;
  font-size:12px;
  line-height:1.55;
}
.c-cal-print-guide-fee > strong{
  display:block;
  margin-bottom:3px;
  color:#333a40;
  font-size:12px;
  font-weight:700;
}
.c-cal-print-guide-fee > div{
  margin:0;
}
.c-cal-print-guide-fee > div > br:first-of-type{
  display:none;
}
.c-cal-print-guide-block{
  margin:0 0 14px;
}
.c-cal-print-guide-block:last-child{
  margin-bottom:0;
}
.c-cal-print-guide-block h3{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0 0 7px;
  color:#2f363c;
  font-size:13px;
  line-height:1.35;
  font-weight:700;
  letter-spacing:-.025em;
}
.c-cal-print-guide-block h3 > span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:18px;
  padding:0 4px;
  box-sizing:border-box;
  border-radius:3px;
  background:#15966f;
  color:#fff;
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:0;
}
.c-cal-print-guide-list{
  margin:0;
  padding:0 0 0 16px;
  color:#4d545b;
  font-size:12px;
  line-height:1.55;
}
.c-cal-print-guide-list li{
  margin:2px 0;
  padding:0;
}
.c-cal-print-guide-list small{
  color:#737a81;
  font-size:11px;
}
.c-cal-print-color-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  margin:0 0 7px;
}
.c-cal-print-color-item{
  min-width:0;
}
.c-cal-print-color-chip{
  box-sizing:border-box;
  min-height:52px;
  padding:6px 6px 5px;
  border-radius:3px;
  color:#fff;
  font-size:10px;
  line-height:1.15;
  letter-spacing:-.02em;
  overflow:hidden;
}
.c-cal-print-color-chip b{
  display:block;
  margin-bottom:3px;
  font-size:11px;
  font-weight:800;
}
.c-cal-print-color-chip small{
  display:block;
  color:inherit;
  font-size:9px;
  line-height:1.15;
  opacity:.96;
}
.c-cal-print-color-chip.is-black{ background:#161616; }
.c-cal-print-color-chip.is-goldred{ background:#e82043; }
.c-cal-print-color-chip.is-cyan{ background:#0b9bd3; }
.c-cal-print-color-chip.is-navy{ background:#2b2a83; }
.c-cal-print-color-chip.is-red{ background:#aa0909; }
.c-cal-print-color-chip.is-green{ background:#069849; }
.c-cal-print-color-chip.is-purple{ background:#86178c; }
.c-cal-print-color-chip.is-orange{ background:#f39800; }
.c-cal-print-color-item > span{
  display:block;
  margin-top:3px;
  color:#5c636a;
  font-size:9px;
  line-height:1.25;
  text-align:center;
  white-space:nowrap;
}
.c-cal-print-guide-note{
  margin:0;
  padding:9px 11px;
  border-radius:6px;
  background:#faf7f2;
  color:#685f54;
  font-size:11px;
  line-height:1.5;
  word-break:keep-all;
}

/* 상세 catalog 이미지 — 원본 비율 유지. gopage가 있으면 이미지 전체가 상세보기 진입점이다. */
.c-cal-catalog-group{
  width:fit-content;
  max-width:100%;
  margin:0 auto;
}
.c-cal-catalog-image{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  margin:0 auto;
}
.c-cal-catalog-image-trigger{
  position:relative;
  width:fit-content;
  max-width:100%;
  margin:0 auto;
  border-radius:6px;
  cursor:pointer;
  outline:none;
  transition:box-shadow .18s ease, opacity .18s ease;
}
@media (hover:hover) and (pointer:fine){
  .c-cal-catalog-image-trigger:hover{
    opacity:.985;
    box-shadow:0 5px 18px rgba(31,38,45,.06);
  }
}
.c-cal-catalog-image-trigger:focus-visible{
  box-shadow:0 0 0 3px rgba(43,103,180,.15);
}

/* 카다로그 자세히 보기 -------------------------------------------------------
   별도 버튼은 두지 않고 안내영역 전체를 클릭한다.
   catalog 이미지와 같은 그룹 안에서 폭을 100%로 잡아 PC에서도 이미지 폭과 정확히 맞춰 중앙정렬한다.
   실제 PC는 e카다로그 새창, 휴대폰/태블릿은 전체화면 이미지 overlay로 분기한다. */
.c-cal-catalog-detail{
  display:block;
  box-sizing:border-box;
  width:100%;
  margin-top:15px;
  padding: 15px 18px;
  border:1px solid #e6e9ec;
  border-radius:7px;
  background:#fbfcfd;
  cursor:pointer;
  outline:none;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.c-cal-catalog-detail__copy{
  min-width:0;
}
.c-cal-catalog-detail__title{
  display:flex;
  align-items:center;
  gap:5px;
}
.c-cal-catalog-detail__title strong{
  color:#25282c;
  font-size:14px;
  font-weight:700;
  line-height:1.35;
}
.c-cal-catalog-detail__title .material-symbols-outlined{
  color:#747b83;
  font-size:16px;
  line-height:1;
}
.c-cal-catalog-detail__desc{
  display:block;
  margin-top:3px;
  color:#858b92;
  font-size:12px;
  line-height:1.45;
  word-break:keep-all;
}
@media (hover:hover) and (pointer:fine){
  .c-cal-catalog-detail:hover{
    border-color:#d8dde2;
    background:#fff;
    box-shadow:0 3px 12px rgba(31,38,45,.045);
  }
  .c-cal-catalog-detail:hover .c-cal-catalog-detail__title .material-symbols-outlined{
    color:#4f5861;
  }
}
.c-cal-catalog-detail:focus-visible{
  border-color:#cbd4de;
  box-shadow:0 0 0 3px rgba(43,103,180,.13);
}

/* 휴대폰/태블릿 전체화면 카다로그 뷰어. 공용 c-sheet의 history/scroll-lock 동작을 그대로 사용한다. */
.c-sheet.c-cal-catalog-viewer[data-ov-placement="bottom"]{
  width:100vw;
  max-width:none;
  height:100dvh;
  max-height:100dvh;
  padding-bottom:env(safe-area-inset-bottom);
  border:0;
  border-radius:0;
  box-shadow:none;
  background:#f4f5f6;
  display:flex;
  flex-direction:column;
}
.c-cal-catalog-viewer__head{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:58px;
  padding:calc(16px + env(safe-area-inset-top)) 16px 12px 18px;
  border-bottom:1px solid #e3e5e8;
  background:rgba(255,255,255,.97);
}
.c-cal-catalog-viewer__title{
  min-width:0;
}
.c-cal-catalog-viewer__title strong{
  display:block;
  overflow:hidden;
  color:#202327;
  font-size:15px;
  font-weight:750;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.c-cal-catalog-viewer__title span{
  display:block;
  margin-top:2px;
  color:#7b8188;
  font-size:11px;
  line-height:1.35;
}
.c-cal-catalog-viewer__close{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#f3f4f5;
  color:#30343a;
  cursor:pointer;
}
.c-cal-catalog-viewer__close .material-symbols-outlined{
  font-size:24px;
}
.c-cal-catalog-viewer__body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:14px 10px calc(24px + env(safe-area-inset-bottom));
}
.c-cal-catalog-page{
  width:min(100%,820px);
  margin:0 auto 18px;
}
.c-cal-catalog-page:last-child{
  margin-bottom:0;
}
.c-cal-catalog-page img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1356 / 1800;
  border:1px solid #e5e7ea;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  touch-action:pan-x pan-y pinch-zoom;
}
/* 맨 위의 기존 펼친 catalog 이미지는 원본 비율을 그대로 사용한다. */
.c-cal-catalog-page--spread{
  margin-bottom:18px;
}
.c-cal-catalog-page--spread img{
  aspect-ratio:auto;
  border-color:#dfe3e7;
}
.c-cal-catalog-viewer__foot{
  display:flex;
  justify-content:center;
  padding:10px 0 4px;
}
.c-cal-catalog-viewer__foot .c-cal-catalog-viewer__close{
  border:1px solid #d9dde2;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.10);
}

/* 모바일 1단: 긴 벽걸이형만 좌우 여백을 조금 더 줘 화면에 꽉 차 보이지 않게 한다. */
@media (max-width:679px){
  .c-cal-catalog-detail{
    margin-top:15px;
    padding: 15px 18px;
  }
  .c-cal-catalog-viewer__body{
    padding-left:8px;
    padding-right:8px;
  }
  .c-cal-pdp-media.is-wall .c-cal-pdp-media__inner{
    padding-left:16px;
    padding-right:16px;
  }
}

/* 펼친 화면: 2단 그리드는 product.css 가 잡고, 여기서는 칸 배치만 지정한다. */
@media (min-width:680px){
  .l-main.l-pdp.c-calendar-pdp > .c-cal-pdp-title{
    grid-column:1 / -1;
  }
  .l-main.l-pdp.c-calendar-pdp > .c-cal-pdp-media{
    grid-column:1;
    width:100%;
    justify-self:center;
    padding-left:0;
    padding-right:0;
  }
  .l-main.l-pdp.c-calendar-pdp > .c-cal-pdp-media img{
    max-width:min(100%,400px);
  }
  .l-main.l-pdp.c-calendar-pdp > .l-pdp-info{
    grid-column:2;
    border-bottom:0;
    padding-left:0;
  }
  .l-main.l-pdp.c-calendar-pdp > *:not(.c-cal-pdp-title):not(.c-cal-pdp-media):not(.l-pdp-info){
    grid-column:1 / -1;
  }
}

/* 최대 PC 폭에서는 기존 PC처럼 이미지 칸 410px을 확보한다. */
@media (min-width:768px){
  .l-main.l-pdp.c-calendar-pdp{
    grid-template-columns:410px minmax(0,1fr);
  }
  .l-main.l-pdp.c-calendar-pdp > .c-cal-pdp-media{
    width:410px;
    max-width:410px;
  }
}