/*
Theme Name: Indie Studio
Theme URI: https://indiestudio.co.kr
Author: Indie Studio
Description: 인디스튜디오 영상 촬영 스튜디오 커스텀 테마. 라이트 섹션 + 다크 글래스 헤더, 인디고 메인 컬러, Paperlogy 단일 폰트. 페이지 마크업은 .dc.html 디자인 파일에서 scripts/build-theme.py 로 생성된다.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: indiestudio
*/

/* 토큰·리셋·반응형은 assets/css/indie-ds.css, :hover 는 assets/css/indie-generated.css.
   여기에는 WordPress 쪽에서만 필요한 규칙을 둔다. */

/* 접근성: 본문 바로가기 */
.skip-link{position:absolute;left:-9999px;top:0;background:#4F46E5;color:#fff;padding:12px 18px;z-index:9999}
.skip-link:focus{left:12px;top:12px}
.screen-reader-text{clip:rect(1px,1px,1px,1px);position:absolute!important;height:1px;width:1px;overflow:hidden}
.skip-link.screen-reader-text:focus{clip:auto;height:auto;width:auto}

/* 헤더는 아래 테두리만 쓴다 — WP 블록 CSS 의 [style*=border-color] 규칙이 나머지 면에 3px 를 그리지 않게 */
header[data-screen-label="Header"]{border-top-width:0;border-left-width:0;border-right-width:0}

/* 블로그 카드 hover (parts/blog-posts.php) */
.ih-card,.ih-feat{transition:transform .25s ease,box-shadow .25s ease}
.ih-card:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(30,27,75,.10)}
.ih-feat:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(30,27,75,.10)}
@media (max-width:900px){
  [style*="grid-template-columns:1.25fr 1fr"]{grid-template-columns:1fr!important}
}

/* Calendarista 폼은 흰 카드 안에 들어가므로 본문색(밝은 회색)을 상속하지 않게 */
.indie-booking,.indie-booking *{color:inherit}
/* Calendarista(Bootstrap)가 자체 폰트를 지정하므로 예약 폼도 사이트 폰트로 */
.indie-booking,.indie-booking *:not(i):not([class*="fa-"]):not([class*="icon"]){font-family:inherit}

/* 글 본문 (index.php) */
.indie-prose{color:#334155;font-size:17px;line-height:1.85}
.indie-prose > * + *{margin-top:1.1em}
.indie-prose h2{font-size:24px;font-weight:700;color:#0f172a;margin-top:2em;letter-spacing:-.02em}
.indie-prose h3{font-size:20px;font-weight:700;color:#0f172a;margin-top:1.6em}
.indie-prose a{color:var(--acInk,#4F46E5);text-decoration:underline;text-underline-offset:3px}
.indie-prose ul,.indie-prose ol{padding-left:1.4em}
.indie-prose img{border-radius:12px;height:auto}
.indie-prose blockquote{border-left:3px solid var(--acInk,#4F46E5);padding:4px 0 4px 18px;color:#475569}
.indie-prose iframe{max-width:100%}
.indie-prose figure{margin:2.2em 0}
.indie-prose figure img{width:100%;border-radius:12px}
.indie-prose figcaption{margin-top:10px;font-size:14px;color:#64748b;text-align:center}
.indie-prose .indie-lead{font-size:19px;color:#0f172a;font-weight:500;line-height:1.8}
.indie-prose .indie-note{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:18px 20px;font-size:15px;color:#475569}
/* 사진 자리 표시 — 글쓴이가 사진을 넣거나 블록째 지운다 */
.indie-prose .indie-photo-slot{border:2px dashed #cbd5e1;border-radius:12px;padding:28px 20px;text-align:center;font-size:14px;color:#64748b;background:#f8fafc}
.indie-prose .indie-check{background:#fef3c7;color:#92400e;font-size:.9em;padding:1px 6px;border-radius:4px}
.alignleft{float:left;margin:0 1.2em 1em 0}
.alignright{float:right;margin:0 0 1em 1.2em}
.aligncenter{margin-left:auto;margin-right:auto}

/* 예약 날짜 칸 — 읽기 전용 입력칸이라 글자를 치는 곳처럼 보인다. 칸 전체가 '달력 열기' 버튼으로 보이게:
   손가락 커서, 오른쪽 달력 아이콘을 강조색 버튼으로, 호버·포커스 때 테두리와 배경을 강조색으로.
   날짜를 고른 뒤에는 parsley 의 초록(검증 통과) 대신 강조색 '선택됨' 상태로 보인다. */
.indie-booking .input-group:has(> .calendarista-start-date){cursor:pointer;border-radius:10px;transition:box-shadow .2s ease}
.indie-booking input.calendarista-start-date.form-control{cursor:pointer;height:auto;padding:13px 16px;font-size:16px;font-weight:600;color:#0f172a;
  background:#fff;border:1.5px solid #cbd5e1;border-right:0;border-radius:10px 0 0 10px;transition:border-color .2s ease,background-color .2s ease}
.indie-booking input.calendarista-start-date::placeholder{color:#64748b;font-weight:500;opacity:1}
.indie-booking input.calendarista-start-date + .input-group-text{cursor:pointer;min-width:54px;justify-content:center;font-size:17px;
  color:var(--acInk,#4F46E5);background:rgba(79,70,229,.08);border:1.5px solid #cbd5e1;border-left:0;border-radius:0 10px 10px 0;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.indie-booking .input-group:has(> .calendarista-start-date):hover,
.indie-booking .input-group:has(> .calendarista-start-date:focus){box-shadow:0 0 0 4px rgba(79,70,229,.14)}
.indie-booking .input-group:has(> .calendarista-start-date):hover > .calendarista-start-date,
.indie-booking input.calendarista-start-date:focus{border-color:var(--acInk,#4F46E5);background-color:#f5f5ff;box-shadow:none;outline:0}
.indie-booking .input-group:has(> .calendarista-start-date):hover > .input-group-text,
.indie-booking input.calendarista-start-date:focus + .input-group-text{color:#fff;background:var(--acInk,#4F46E5);border-color:var(--acInk,#4F46E5)}
.indie-booking input.calendarista-start-date.parsley-success{color:#0f172a!important;background-color:#f5f5ff!important;border:1.5px solid var(--acBorderStrong,rgba(79,70,229,.6))!important;border-right:0!important}
.indie-booking input.calendarista-start-date.parsley-success + .input-group-text{border-color:var(--acBorderStrong,rgba(79,70,229,.6))}
.indie-booking input.calendarista-start-date:disabled{cursor:progress;background:#f8fafc}
/* 달력 팝업(body 에 붙는다)의 선택 가능한 날짜도 누를 수 있어 보이게 */
#ui-datepicker-div.calendarista-datepicker td[data-handler="selectDay"] a{cursor:pointer;border-radius:8px;transition:background-color .15s ease,color .15s ease}
#ui-datepicker-div.calendarista-datepicker td[data-handler="selectDay"] a:hover{background:var(--acInk,#4F46E5)!important;color:#fff!important;border-color:var(--acInk,#4F46E5)!important}
@media (prefers-reduced-motion:reduce){.indie-booking .input-group,.indie-booking .input-group > *{transition:none}}

/* 문의 폼 (Contact Form 7, 예약하기 고객센터) — 입력칸은 .dc.html 의 인라인 스타일과 같게.
   테마가 CF7 기본 CSS 를 빼므로(functions.php indiestudio_strip_plugin_styles) 숨김·안내 메시지 규칙도 여기서 준다. */
.indie-cf7 .wpcf7-form-control-wrap{display:block}
.indie-cf7 input[type=text],.indie-cf7 input[type=tel],.indie-cf7 input[type=email],.indie-cf7 select,.indie-cf7 textarea{
  display:block;width:100%;font-family:inherit;font-size:16px;color:#0f172a;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:13px 14px;outline:none;
  transition:border-color .2s ease,background-color .2s ease}
.indie-cf7 textarea{line-height:1.625;resize:vertical}
.indie-cf7 input:focus,.indie-cf7 select:focus,.indie-cf7 textarea:focus{border-color:var(--acInk,#4F46E5);background:#fff}
.indie-cf7 ::placeholder{color:#94a3b8}
.indie-cf7 .wpcf7-list-item{margin:0}
.indie-cf7 .wpcf7-acceptance label{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#64748b;line-height:1.6;cursor:pointer}
.indie-cf7 .wpcf7-acceptance input{margin-top:3px;flex:0 0 auto}
.indie-cf7 .wpcf7-submit{width:100%;background:var(--acInk,#4F46E5);color:#fff;font-family:inherit;font-weight:700;font-size:16px;padding:16px;border:none;border-radius:12px;cursor:pointer;transition:opacity .2s ease,background-color .2s ease}
.indie-cf7 .wpcf7-submit:hover{background:#0f172a}
.indie-cf7 .wpcf7-submit:disabled{opacity:.55;cursor:not-allowed;background:var(--acInk,#4F46E5)}
.indie-cf7 .wpcf7-not-valid{border-color:#fda4af!important}
.indie-cf7 .wpcf7-not-valid-tip{display:block;margin-top:6px;font-size:13px;color:#e11d48}
.indie-cf7 .wpcf7-response-output{margin:16px 0 0;padding:14px 16px;border-radius:12px;font-size:14px;line-height:1.6;border:1px solid #fecdd3;background:#fff1f2;color:#9f1239}
.indie-cf7 form.sent .wpcf7-response-output{border-color:#a7f3d0;background:#ecfdf5;color:#065f46}
.indie-cf7 form.init .wpcf7-response-output,.indie-cf7 form.resetting .wpcf7-response-output,.indie-cf7 form.submitting .wpcf7-response-output{display:none}
.indie-cf7 form.submitting .wpcf7-submit{opacity:.7;cursor:progress}
.indie-cf7 .hidden-fields-container,.indie-cf7 .wpcf7-spinner,.indie-cf7 .wpcf7-display-none{display:none}
.indie-cf7 .screen-reader-response{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;padding:0;border:0;word-wrap:normal!important}

/* 모바일 메뉴 (900px 이하) — 텍스트 메뉴 대신 [로고 · 예약하기 · ☰], ☰ 를 누르면 아래로 메뉴 패널.
   마크업은 functions.php 의 indiestudio_nav(), 여닫기는 indie-interactions.js 의 mnav().
   indie-ds.css 의 예전 모바일 규칙(메뉴 가로 스크롤·380px 이하 두 줄 헤더)은 테마에서는 여기서 덮는다. */
.indie-burger,.indie-mnav{display:none}
@media (max-width:900px){
  header > div{gap:12px!important;height:64px!important;flex-wrap:nowrap!important;padding-top:0!important}
  header .indie-nav{display:none!important}
  header .indie-nav + a{margin-left:auto!important;padding:10px 18px!important;font-size:14px!important}
  .indie-burger{order:5;display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;flex:0 0 auto;width:44px;height:44px;margin-right:-6px;
    border:none;border-radius:10px;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .indie-burger span{display:block;width:22px;height:2px;border-radius:2px;background:#fff;transition:transform .25s ease,opacity .2s ease}
  .indie-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .indie-burger.is-open span:nth-child(2){opacity:0}
  .indie-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .indie-burger:focus-visible{outline:3px solid var(--acSolid,#818CF8);outline-offset:2px}
  .indie-mnav:not([hidden]){display:block;position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 64px);overflow-y:auto;overscroll-behavior:contain;
    background:#020617;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 24px 40px rgba(2,6,23,.45);animation:indieMnavIn .2s ease}
  header .indie-mnav nav{display:flex!important;flex-direction:column;gap:0!important;overflow:visible!important;order:0!important;width:auto!important;margin:0!important;padding:6px 16px 14px!important}
  .indie-mnav nav a{display:block;padding:15px 8px;font-size:17px;font-weight:600;color:#cbd5e1;border-bottom:1px solid rgba(255,255,255,.07)}
  .indie-mnav nav a:last-child{border-bottom:none}
  .indie-mnav nav a[aria-current="page"]{color:#fff;box-shadow:inset 3px 0 0 var(--acSolid,#818CF8);padding-left:16px}
  /* 메뉴가 열려 있는 동안은 헤더를 진하게, 스크롤해도 숨기지 않는다 (header-scroll.js 의 인라인 값을 덮는다) */
  header:has(.indie-burger.is-open){background:#020617!important;transform:none!important}
}
@keyframes indieMnavIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.indie-mnav:not([hidden]){animation:none}.indie-burger span{transition:none}}

/* 카드 등장 효과 — 스크롤로 들어올 때 40px 아래에서 0.8초 동안 페이드인, 감속 곡선(ease-out) (indie-interactions.js 의 reveal()).
   .rv 는 JS 가 화면 밖 카드에만 붙이므로 JS 가 없으면 아무것도 숨겨지지 않는다. */
.rv{opacity:0;transform:translateY(40px)!important;transition:opacity .8s cubic-bezier(.22,1,.36,1) var(--rv-delay,0ms),transform .8s cubic-bezier(.22,1,.36,1) var(--rv-delay,0ms)!important}
.rv.rv-in{opacity:1;transform:none!important}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none!important;transition:none!important}}
@media print{.rv{opacity:1;transform:none!important}}

/* 홈 홍보 팝업 — 재방문 고객 1시간 무료 (functions.php indiestudio_promo_popup, 여닫기는 indie-interactions.js 의 promo()).
   틀(딤·가운데 정렬·등장 애니메이션)은 indie-ds.css 의 .indie-modal 을 그대로 쓰고 폭과 안쪽만 바꾼다. */
.indie-promo{width:min(440px,calc(100vw - 32px));max-height:min(92vh,760px);border-radius:20px}
.indie-promo-hero{position:relative;flex:0 0 auto;background:var(--acGrad,linear-gradient(90deg,#4F46E5,#7C3AED));color:#fff;padding:30px 28px 26px;text-align:center}
.indie-promo-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border:none;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;font-size:17px;cursor:pointer;transition:background-color .2s}
.indie-promo-x:hover{background:rgba(255,255,255,.28)}
.indie-promo-eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.02em;background:rgba(255,255,255,.18);border-radius:99px;padding:6px 14px}
.indie-promo-hero h3{margin-top:14px;font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.3}
.indie-promo-hero h3 b{color:#FDE68A;font-weight:800}
.indie-promo-hero p{margin-top:8px;font-size:15px;color:rgba(255,255,255,.85);line-height:1.6}
.indie-promo-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:22px 24px 4px}
.indie-promo-ex{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:16px 18px}
.indie-promo-ex-label{font-size:13px;font-weight:700;color:#64748b}
.indie-promo-ex-row{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:10px;color:#94a3b8}
.indie-promo-chip{font-size:16px;font-weight:700;color:#0f172a;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:9px 14px;white-space:nowrap}
.indie-promo-chip.is-pay{color:var(--acInk,#4F46E5);border-color:var(--acBorderStrong,rgba(79,70,229,.6))}
.indie-promo-ex-bar{margin-top:12px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;font-size:12px;font-weight:700;text-align:center}
.indie-promo-ex-bar span{padding:7px 0;border-radius:6px;background:var(--acDim,rgba(79,70,229,.16));color:var(--acInk,#4F46E5)}
.indie-promo-ex-bar span.is-free{background:#FEF3C7;color:#92400E}
.indie-promo-how{margin-top:16px;display:flex;gap:10px;font-size:14.5px;color:#334155;line-height:1.65}
.indie-promo-how i{margin-top:5px;color:var(--acInk,#4F46E5);font-size:13px}
.indie-promo-how b{color:#0f172a;font-weight:700}
.indie-promo-terms{margin-top:14px;padding:14px 0 0 0;border-top:1px solid #e2e8f0;list-style:none}
.indie-promo-terms li{position:relative;padding-left:12px;font-size:13px;color:#64748b;line-height:1.7}
.indie-promo-terms li::before{content:'';position:absolute;left:0;top:.75em;width:4px;height:4px;border-radius:50%;background:#cbd5e1}
.indie-promo-terms b{color:#334155;font-weight:700}
.indie-promo-cta{margin:18px 0 18px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--acInk,#4F46E5);color:#fff;font-weight:700;font-size:16px;padding:15px;border-radius:12px;transition:background-color .2s}
.indie-promo-cta:hover{background:#0f172a}
.indie-promo-foot{flex:0 0 auto;display:flex;justify-content:space-between;border-top:1px solid #e2e8f0}
.indie-promo-foot button{flex:1;font-family:inherit;font-size:14px;font-weight:600;color:#64748b;background:#fff;border:none;padding:14px;cursor:pointer;transition:background-color .2s,color .2s}
.indie-promo-foot button + button{border-left:1px solid #e2e8f0;color:#0f172a}
.indie-promo-foot button:hover{background:#f8fafc}
:is(.indie-promo-x,.indie-promo-foot button,.indie-promo-cta):focus-visible{outline:3px solid var(--acInk,#4F46E5);outline-offset:2px}
@media (max-width:380px){.indie-promo-hero h3{font-size:24px}.indie-promo-chip{font-size:14px;padding:8px 10px}}

/* 맨 위로 버튼 — 스크롤을 내리면 서서히 떠오른다 (indie-interactions.js 가 .is-on 토글) */
.indie-totop{position:fixed;right:28px;bottom:28px;z-index:90;width:56px;height:56px;border-radius:99px;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;background:#0f172a;color:#fff;font-size:20px;
  box-shadow:0 10px 28px rgba(2,6,23,.28);opacity:0;visibility:hidden;transform:translateY(16px) scale(.92);
  transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s,background .2s}
.indie-totop.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .35s ease,visibility 0s,background .2s}
.indie-totop:hover{background:var(--acInk,#4F46E5);transform:translateY(-3px)}
.indie-totop:focus-visible{outline:3px solid var(--acInk,#4F46E5);outline-offset:3px}
@media (max-width:640px){.indie-totop{right:16px;bottom:16px;width:48px;height:48px;font-size:17px}}
@media (prefers-reduced-motion:reduce){.indie-totop,.indie-totop.is-on{transition:opacity .2s,visibility 0s}}