/* concept.css, CONCEPT.md 의 우선순위를 화면에 적용하는 층.
   DESIGN.md / tokens.css 의 표현 규칙은 바꾸지 않는다.
   전역 keep-all 은 tokens.css 에 있다. 반드시 tokens.css 뒤에 불러온다. */

/* ============================================================
   컨셉 D: 질문 입구 + 1년 달력 (05단계 구현 2026-09-25)
   CONCEPT.md 의 우선순위를 적용하는 층. DESIGN.md 는 수정하지 않는다.
   ============================================================ */

/* 첫 화면에 질문이 들어오도록 히어로를 줄인다 (CONCEPT.md Priority 1) */
.hero:has(.hero-video){min-height:0}
.hero-inner{padding:36px 24px 28px}
.hero-logo{width:190px;margin-bottom:12px}
.hero h1{font-size:clamp(26px,3.2vw,34px)}
.hero-badge{margin-top:12px;margin-bottom:8px}
.hero-slogan{margin-bottom:0;font-size:15px}
.intro-bar{padding-top:20px;padding-bottom:20px}
.intro-bar p{font-size:15px;line-height:1.7}

.ptg-intro{max-width:880px;margin:0 auto;padding:36px 24px 0;text-align:center}
.ptg-intro h2{font-size:28px;font-weight:700;letter-spacing:-.024em;margin-bottom:8px}
.ptg-intro p{font-size:15px;color:var(--wds-label-alternative);line-height:1.7}

/* ---------- 설정: 질문 밖에서 한 번만 고른다 ---------- */
.ptg-setup{
  max-width:880px;margin:24px auto 0;padding:18px 20px;border-radius:12px;
  background:var(--wds-bg-alt);border:1px solid var(--wds-line-normal);
}
.ptg-setup__q{font-size:17px;font-weight:600;margin-bottom:12px;color:var(--wds-label-normal)}
.ptg-pick{display:flex;flex-wrap:wrap;gap:8px}
.ptg-pick button{
  appearance:none;cursor:pointer;font:inherit;font-size:15px;font-weight:500;
  padding:10px 16px;border-radius:8px;white-space:nowrap;
  border:1px solid var(--wds-line-normal);background:var(--wds-bg);color:var(--wds-label-normal);
}
.ptg-pick button:hover{border-color:var(--wds-label-alternative)}
.ptg-pick button[aria-pressed="true"]{
  border-color:var(--wds-primary);background:var(--wds-primary-weak);
  color:var(--wds-primary);font-weight:600;
}
.ptg-setup__opt{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;cursor:pointer;
  font-size:15px;color:var(--wds-label-normal);
}
.ptg-setup__opt input{width:18px;height:18px;accent-color:var(--wds-primary);cursor:pointer}
.ptg-setup__note{margin-top:10px;font-size:14px;color:var(--wds-label-alternative)}
.ptg-reset{
  appearance:none;border:0;background:none;cursor:pointer;font:inherit;
  font-size:14px;color:var(--wds-label-alternative);text-decoration:underline;
  padding:0;margin-left:8px;
}

/* ---------- 질문 목록 ---------- */
.ptg-qs{max-width:880px;margin:20px auto 0;padding:0 24px;display:flex;flex-direction:column;gap:8px}
.ptg-q{border:1px solid var(--wds-line-normal);border-radius:12px;background:var(--wds-bg);overflow:hidden}
.ptg-q__head{
  appearance:none;cursor:pointer;font:inherit;width:100%;text-align:left;
  padding:16px 18px;background:transparent;border:0;
  font-size:17px;font-weight:500;color:var(--wds-label-normal);line-height:1.5;
}
.ptg-q__head:hover{background:var(--wds-fill-alternative)}
.ptg-q[data-open="true"]{background:var(--wds-bg-alt);border-color:var(--wds-primary)}
.ptg-q[data-open="true"] .ptg-q__head{font-weight:600}
.ptg-q__body{display:none;padding:0 18px 18px;font-size:15px;line-height:1.75;color:var(--wds-label-normal)}
.ptg-q[data-open="true"] .ptg-q__body{display:block}
.ptg-q__body p{margin-bottom:10px}
.ptg-q__body p:last-child{margin-bottom:0}
.ptg-q__lead{color:var(--wds-label-normal)}
.ptg-q__go{margin-top:14px}
.ptg-q__go a{
  display:inline-block;text-decoration:none;
  font-size:15px;font-weight:600;padding:10px 16px;border-radius:8px;
  background:var(--wds-primary);color:#fff;
}
.ptg-q__go a:hover{background:var(--wds-primary-strong)}
.ptg-help{margin:6px 0 0 0;padding-left:20px;font-size:15px;line-height:1.8}
.ptg-help li{margin-bottom:8px}

/* ---------- 1년 달력 ---------- */
.ptg-cal{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:14px}
/* display 를 지정한 요소는 hidden 속성이 안 먹는다. 명시해 준다 */
.ptg-cal[hidden]{display:none}
.ptg-cal__m{
  appearance:none;cursor:pointer;font:inherit;text-align:left;
  padding:12px;border-radius:12px;
  border:1px solid var(--wds-line-normal);background:var(--wds-bg);
}
.ptg-cal__m[aria-pressed="true"]{border-color:var(--wds-primary);background:var(--wds-primary-weak)}
.ptg-cal__m.empty{background:var(--wds-bg-alt);border-color:var(--wds-line-alternative)}
.ptg-cal__m .n{display:block;font-size:15px;font-weight:600;margin-bottom:5px}
.ptg-cal__m .d{font-size:12px;font-weight:500;color:var(--wds-primary);margin-left:4px}
.ptg-cal__m.empty .n{color:var(--wds-label-alternative)}
.ptg-cal__m.empty .d{color:var(--wds-label-assistive)}
.ptg-cal__m .t{display:block;font-size:13px;line-height:1.45;color:var(--wds-label-alternative)}
.ptg-cal__m .q{display:block;margin-top:7px;font-size:12px;font-weight:500;color:var(--wds-label-assistive)}
.ptg-cal__m .tag{
  display:inline-block;margin-top:6px;font-size:11px;font-weight:500;
  padding:2px 6px;border-radius:6px;background:var(--wds-fill-normal);color:var(--wds-label-alternative);
}
.ptg-cal__back{
  appearance:none;cursor:pointer;font:inherit;
  font-size:14px;font-weight:500;margin-top:14px;
  padding:8px 14px;border-radius:8px;
  border:1px solid var(--wds-line-normal);background:var(--wds-bg);color:var(--wds-label-normal);
}
.ptg-cal__back:hover{border-color:var(--wds-label-alternative)}
.ptg-cal__open{
  margin-top:12px;padding:18px 20px;border-radius:12px;
  background:var(--wds-bg);border:1px solid var(--wds-line-normal);
}
.ptg-cal__open h4{font-size:17px;font-weight:600;margin-bottom:12px}
.ptg-two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ptg-two h5{font-size:13px;font-weight:500;color:var(--wds-label-alternative);margin-bottom:6px}
.ptg-two ul{list-style:none;font-size:15px;line-height:1.75;margin:0;padding:0}
.ptg-two li{padding-left:14px;position:relative}
.ptg-two li::before{content:"·";position:absolute;left:3px;color:var(--wds-label-assistive)}
.ptg-two .mine li{font-weight:500}
/* 소관이 다른 것은 선으로 나눈다 (CONCEPT.md Visual behavior)
   접되 그 달의 기한은 제목에 남긴다 (De-emphasize 금지 조항) */
.ptg-soc{margin-top:16px;padding-top:16px;border-top:1px solid var(--wds-line-normal)}
.ptg-soc__head{
  appearance:none;cursor:pointer;font:inherit;width:100%;text-align:left;
  background:transparent;border:0;padding:0;display:block;
}
.ptg-soc__head .t{font-size:15px;font-weight:600;color:var(--wds-label-normal)}
.ptg-soc__head .s{font-size:14px;font-weight:500;color:var(--wds-primary);margin-left:8px;white-space:nowrap}
.ptg-soc__head .o{display:block;margin-top:3px;font-size:13px;color:var(--wds-label-alternative)}
.ptg-soc__head::after{
  content:"펼쳐 보기";float:right;font-size:13px;font-weight:500;
  color:var(--wds-label-alternative);text-decoration:underline;
}
.ptg-soc[data-open="true"] .ptg-soc__head::after{content:"접기"}
.ptg-soc__body{display:none;margin-top:12px}
.ptg-soc[data-open="true"] .ptg-soc__body{display:block}
.ptg-note{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--wds-line-alternative);
  font-size:14px;line-height:1.7;color:var(--wds-label-alternative);
}
.ptg-cal__src{margin-top:10px;font-size:13px;line-height:1.7;color:var(--wds-label-alternative)}

/* ---------- 시작가: 질문을 펼치지 않아도 보인다 ---------- */
.ptg-fee{
  max-width:880px;margin:24px auto 0;padding:20px 24px;border-radius:16px;
  background:var(--wds-bg);border:1px solid var(--wds-line-normal);
}
.ptg-fee__head{font-size:15px;font-weight:500;color:var(--wds-label-alternative);margin-bottom:10px}
.ptg-fee__rows{display:flex;gap:32px;flex-wrap:wrap;margin-bottom:14px}
.ptg-fee__row{display:flex;align-items:baseline;gap:8px}
.ptg-fee__row .w{font-size:15px;color:var(--wds-label-alternative)}
.ptg-fee__row .a{
  font-size:28px;font-weight:700;letter-spacing:-.02em;
  color:var(--wds-primary);font-variant-numeric:tabular-nums;
}
.ptg-fee__row .u{font-size:15px;font-weight:500;color:var(--wds-label-normal)}
.ptg-fee__cond{
  font-size:15px;line-height:1.7;color:var(--wds-label-normal);
  padding-top:14px;border-top:1px solid var(--wds-line-alternative);
}
.ptg-fee__cond a{color:var(--wds-primary)}

/* ---------- 다음 행동: 문의는 홈페이지가 받는다 ---------- */
.ptg-next{max-width:880px;margin:24px auto 0;padding:0 24px;text-align:center}
.ptg-next__q{font-size:17px;font-weight:600;margin-bottom:14px;color:var(--wds-label-normal)}
.ptg-next__btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.ptg-next__main, .ptg-next__sub{
  display:inline-block;text-decoration:none;font-size:15px;font-weight:600;
  padding:12px 22px;border-radius:12px;
}
.ptg-next__main{background:var(--wds-primary);color:#fff}
.ptg-next__main:hover{background:var(--wds-primary-strong)}
.ptg-next__sub{
  background:var(--wds-bg);color:var(--wds-label-normal);
  border:1px solid var(--wds-line-normal);font-weight:500;
}
.ptg-next__note{margin-top:12px;font-size:14px;color:var(--wds-label-alternative)}

/* ---------- 연락처 묶음 ----------
   5개가 4+1 로 빠져 오른쪽이 비는 것을 막는다.
   위 3개는 2칸씩, 아래 주소·계좌는 3칸씩. 주소 칸이 넓어져 <br> 자리에서만 줄이 바뀐다. */
/* 5개 항목을 3열로 둔다. 주소는 전화 아래, 입금계좌는 팩스 아래로 아이콘 기준선이 맞는다.
   (2026-09-25 대표 지적) 6열로 4·5번을 넓히면 빈칸은 메워지지만 세로 기준선이 어긋난다. */
.info-grid{grid-template-columns:repeat(3,1fr);gap:24px 32px;align-items:start}
.info-item{grid-column:auto}
.info-item:nth-child(4) p,
.info-item:nth-child(5) p{white-space:nowrap}

/* ---------- 원래 8장 카드 묶음은 숨긴다 (마크업은 보존) ---------- */
.ptg-hidden{display:none !important}

@media(max-width:900px){
  .ptg-cal{grid-template-columns:repeat(4,1fr)}
  .ptg-two{grid-template-columns:1fr}
  .info-grid{grid-template-columns:repeat(2,1fr)}
  .info-item,
  .info-item:nth-child(4),
  .info-item:nth-child(5){grid-column:auto}
}
@media(max-width:600px){
  .ptg-intro{padding:28px 16px 0}
  .ptg-setup{margin-left:16px;margin-right:16px;padding:16px 18px}
  .ptg-qs, .ptg-next{padding-left:16px;padding-right:16px}
  .ptg-fee{margin-left:16px;margin-right:16px;padding:18px 20px}
  .ptg-cal{grid-template-columns:repeat(3,1fr)}
  .ptg-fee__rows{gap:20px}
  .ptg-fee__row .a{font-size:24px}
  .ptg-next__main, .ptg-next__sub{flex:1 1 auto}
  .info-grid{grid-template-columns:1fr}
  /* 좁은 화면에서는 nowrap 이 넘친다. 어절 단위 줄바꿈으로 되돌린다 */
  .info-item:nth-child(4) p,
  .info-item:nth-child(5) p{white-space:normal}
}