@charset "utf-8";
/* =====================================================================
   BABY SCENE STUDIO · concept.css  (컨셉 갤러리)
   ===================================================================== */
.concept-main, .concept-gallery{ max-width:1200px; margin:0 auto; padding:60px 24px 100px; }

/* ===== 메인: 주기별 카드 ===== */
.cm-head{ text-align:center; margin-bottom:48px; }
.cm-eyebrow{ display:inline-block; font-size:13px; letter-spacing:3px; color:#2f9e6e; font-weight:800; }
.cm-title{ font-size:32px; font-weight:800; color:#22262e; margin:12px 0 12px; letter-spacing:-.5px; }
.cm-sub{ color:#8a909a; font-size:15px; line-height:1.7; }

.cm-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.cm-card{ display:block; text-decoration:none; border-radius:16px; overflow:hidden; background:#fff; border:1px solid #ECECEC; transition:transform .25s, box-shadow .25s, border-color .25s; }
.cm-card:hover{ transform:translateY(-5px); box-shadow:0 18px 44px rgba(0,0,0,.10); border-color:#dfe3e8; }
.cm-thumb{ display:block; aspect-ratio:1/1; overflow:hidden; }
.cm-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease; }
.cm-card:hover .cm-thumb img{ transform:scale(1.05); }
.cm-cap{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-top:2px solid #2f9e6e; }
.cm-name{ font-size:19px; font-weight:800; color:#22262e; }
.cm-en{ font-size:11px; letter-spacing:2px; color:#aab0b8; font-weight:700; }

/* ===== 갤러리 ===== */
.cg-head{ margin-bottom:34px; }
.cg-back{ display:inline-block; font-size:13px; color:#8a909a; text-decoration:none; margin-bottom:14px; }
.cg-back:hover{ color:#2f9e6e; }
.cg-title{ font-size:28px; font-weight:800; color:#22262e; letter-spacing:-.5px; }
.cg-sub{ margin-top:10px; color:#8a909a; font-size:14px; }

/* 갤러리 탭 (돌/시그니처) */
.cg-tabs{ display:flex; gap:8px; border-bottom:1px solid #ECECEC; margin-bottom:26px; }
.cg-tab{ position:relative; padding:12px 20px; background:none; border:0; font-family:inherit; font-size:16px; font-weight:700; color:#9aa0a8; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.cg-tab:hover{ color:#2f9e6e; }
.cg-tab.is-active{ color:#22262e; border-bottom-color:#2f9e6e; }

/* minmax(0,1fr) : 긴 한글 컨셉명(keep-all)이 컬럼 폭을 밀어 카드가 어긋나는 것 방지 → 항상 균등 분할
   align-items:start : 카드(button)가 행 높이만큼 늘어나며 내용을 세로 가운데로 미는 것 방지 → 이미지 상단 정렬 */
.cg-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:start; }
.cg-grid[hidden]{ display:none; }
.cg-card{ border:0; background:none; padding:0; cursor:pointer; text-align:left; font-family:inherit; }
.cg-img{ display:block; position:relative; aspect-ratio:3/4; border-radius:8px; overflow:hidden; background:#F2F4F7; }
.cg-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease; }
.cg-card:hover .cg-img img{ transform:scale(1.06); }
.cg-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.30)); opacity:0; transition:opacity .25s; }
.cg-card:hover .cg-img::after{ opacity:1; }
.cg-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:13px; }
.cg-name{ min-width:0; overflow-wrap:anywhere; font-size:15px; font-weight:700; color:#22262e; }
.cg-make{ flex:0 0 auto; font-size:12px; font-weight:700; color:#2f9e6e; border:1px solid #BFE9D2; border-radius:999px; padding:4px 13px; transition:.2s; }
.cg-card:hover .cg-make{ background:#2f9e6e; color:#fff; border-color:#2f9e6e; }

/* ===== 와이드(2:1) 변형 : .cg-grid 에 is-wide (예: newborn_test.asp) ===== */
.cg-grid.is-wide{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; }
.cg-grid.is-wide .cg-img{ aspect-ratio:2/1; }
/* 모달/상세 없이 보기만 하는 정적 카드 (클릭·호버 효과 없음) */
.cg-card.is-static{ cursor:default; }
.cg-card.is-static:hover .cg-img img{ transform:none; }
.cg-card.is-static:hover .cg-img::after{ opacity:0; }

/* ===== 컨셉 상세 (인페이지 뷰) ===== */
.cd-view[hidden]{ display:none; }
/* 상세가 열리면 갤러리(헤드·탭·그리드) 숨김 */
body.cd-open .cg-head,
body.cd-open .cg-tabs,
body.cd-open .cg-grid{ display:none !important; }

.cd-back{ display:inline-block; font-size:13px; color:#8a909a; text-decoration:none; margin-bottom:18px; cursor:pointer; background:none; border:0; font-family:inherit; }
.cd-back:hover{ color:#2f9e6e; }
.cd-head{ display:flex; align-items:center; gap:13px; margin-bottom:8px; }
.cd-like{ width:44px; height:44px; border-radius:50%; border:1px solid #ECECEC; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:0 0 auto; transition:.2s; }
.cd-like svg{ width:22px; height:22px; }
.cd-like .hf{ fill:none; stroke:#aab0b8; stroke-width:1.6; transition:.2s; }
.cd-like:hover{ border-color:#dfe3e8; }
.cd-like.is-on{ border-color:#FAD4D8; background:#FFF1F3; }
.cd-like.is-on .hf{ fill:#e5484d; stroke:#e5484d; }
.cd-name{ font-size:25px; font-weight:800; color:#22262e; letter-spacing:-.5px; }
.cd-view .cg-sub{ margin:0 0 32px; }
/* 상세 이미지 : cd-view(본문) 전체 폭에 꽉 차게 세로 나열 (원본 비율 그대로) */
.cd-imgs{ display:flex; flex-direction:column; gap:20px; }
.cd-imgs img{ width:100%; height:auto; display:block; border-radius:0px; background:#F2F4F7; }

/* ===== 모달 ===== */
.cmodal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; }
.cmodal[hidden]{ display:none; }
.cmodal-ov{ position:absolute; inset:0; background:rgba(20,24,32,.6); }
.cmodal-dlg{ position:relative; z-index:1; width:100%; max-width:600px; background:#fff; border-radius:20px; padding:26px; box-shadow:0 30px 90px rgba(0,0,0,.3); }
.cmodal-x{ position:absolute; top:16px; right:16px; width:40px; height:40px; border:0; background:none; cursor:pointer; color:#8a909a; font-size:26px; line-height:1; }
.cmodal-x:hover{ color:#22262e; }
.cmodal-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:18px; padding-right:36px; }
.cmodal-cyc{ font-size:12px; color:#2f9e6e; font-weight:800; letter-spacing:1.5px; }
.cmodal-name{ font-size:23px; font-weight:800; color:#22262e; margin:5px 0 0; letter-spacing:-.5px; }
.cmodal-like{ width:44px; height:44px; border-radius:50%; border:1px solid #ECECEC; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:0 0 auto; transition:.2s; }
.cmodal-like svg{ width:22px; height:22px; }
.cmodal-like .hf{ fill:none; stroke:#aab0b8; stroke-width:1.6; transition:.2s; }
.cmodal-like.is-on{ border-color:#FAD4D8; background:#FFF1F3; }
.cmodal-like.is-on .hf{ fill:#e5484d; stroke:#e5484d; }

.cmodal-stage{ position:relative; aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:#F2F4F7; }
.cmodal-stage img{ width:100%; height:100%; object-fit:cover; display:block; }
.cmodal-nav{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.92); color:#22262e; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 12px rgba(0,0,0,.18); }
.cmodal-nav.prev{ left:12px; }
.cmodal-nav.next{ right:12px; }
.cmodal-nav svg{ width:20px; height:20px; }
.cmodal-nav:hover{ background:#fff; }
.cmodal-dots{ display:flex; justify-content:center; gap:8px; margin-top:18px; }
.cm-dot{ width:9px; height:9px; border-radius:50%; border:0; background:#D6D9DE; cursor:pointer; padding:0; transition:.2s; }
.cm-dot.on{ background:#2f9e6e; width:24px; border-radius:999px; }

/* ===== 반응형 ===== */
@media (max-width:900px){
  .cm-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .cg-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:560px){
  .concept-main, .concept-gallery{ padding:40px 16px 70px; }
  .cm-title{ font-size:26px; }
  /* 좁은 폭에서 한글/영어가 한 줄에 붙어 깨짐 → 위 영어 / 아래 한글 로 쌓기
     (column-reverse : 마크업 순서는 한글→영어지만 화면은 영어가 위) */
  .cm-cap{ padding:13px 14px; flex-direction:column-reverse; align-items:flex-start; gap:3px; }
  .cm-name{ font-size:17px; }
  .cm-en{ white-space:nowrap; letter-spacing:1.5px; }
  .cg-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .cg-grid.is-wide{ grid-template-columns:1fr; gap:22px; }   /* 와이드 변형은 모바일 1열 */
  .cg-title{ font-size:23px; }
  .cd-name{ font-size:20px; }
  .cd-imgs{ gap:14px; }
  .cmodal-dlg{ padding:20px; }
  .cmodal-name{ font-size:20px; }
}