/* Purchase page — clean_responsive 팔레트 상속 */

.purchase-page{
  background:#f4f7fa;
  min-height:calc(100vh - 82px);
  padding:40px 20px 80px;
}
.purchase-wrap{
  max-width:720px;
  margin:0 auto;
  background:#fff;
  border-radius:18px;
  box-shadow:0 12px 40px rgba(14,39,75,.06);
  padding:36px 40px;
}
.purchase-title{
  text-align:center;
  margin-bottom:28px;
}
.purchase-title .kicker{
  margin:0 0 6px;
  color:var(--cyan);
  font-size:14px;
  font-weight:900;
}
.purchase-title h1{
  margin:0;
  color:var(--navy);
  font-size:26px;
  font-weight:950;
  letter-spacing:-.03em;
}

.p-section{
  padding:24px 0;
  border-top:1px solid var(--line);
}
.p-section:first-of-type{border-top:0;padding-top:0}
.p-section h2{
  margin:0 0 16px;
  color:var(--navy);
  font-size:17px;
  font-weight:950;
}

/* 옵션 선택 */
.option-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
}
.option-card{
  cursor:pointer;
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:16px 12px;
  text-align:center;
  transition:.15s ease;
  background:#fff;
}
.option-card input[type=radio]{display:none}
.option-card:hover{border-color:#a5b3c4}
.option-card.selected{
  border-color:var(--cyan);
  background:#f0fbfd;
  box-shadow:0 6px 18px rgba(24,184,199,.14);
}
.option-head{
  font-size:14px;
  font-weight:800;
  color:var(--muted);
  margin-bottom:6px;
}
.option-price{
  font-size:17px;
  font-weight:950;
  color:var(--navy);
}
.option-per{
  margin-top:4px;
  font-size:11px;
  color:var(--muted);
  min-height:14px;
}

.single-product{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 18px;
  background:#f8fbfc;
  border-radius:12px;
}
.single-name{font-weight:800;color:var(--navy)}
.single-price{font-weight:950;color:var(--navy);font-size:17px}

/* 폼 필드 */
.field-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.field span{
  font-size:13px;
  font-weight:700;
  color:#3a4d68;
}
.field span em{color:#e04b4b;font-style:normal}
.field input{
  height:44px;
  padding:0 12px;
  border:1.5px solid var(--line);
  border-radius:8px;
  font-size:14px;
  font-family:inherit;
  outline:none;
  transition:border-color .15s;
}
.field input:focus{border-color:var(--cyan)}
.field-hint{
  margin:10px 0 0;
  font-size:12px;
  color:var(--muted);
}

/* 포인트 */
.point-box{
  background:#f8fbfc;
  border-radius:12px;
  padding:16px 18px;
  margin-bottom:16px;
}
.point-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 0;
  font-size:14px;
}
.point-row + .point-row{border-top:1px dashed #d5dfe9;margin-top:4px;padding-top:12px}
.point-row b{color:var(--navy);font-weight:900}
.point-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  color:var(--navy);
  font-weight:700;
  font-size:13px;
}
.point-toggle input{width:18px;height:18px;accent-color:var(--cyan)}
.input-with-p{
  display:flex;
  align-items:center;
  gap:8px;
}
.input-with-p input{
  width:120px;
  height:38px;
  padding:0 10px;
  border:1.5px solid var(--line);
  border-radius:8px;
  font-size:14px;
  text-align:right;
  outline:none;
  font-family:inherit;
}
.input-with-p input:focus{border-color:var(--cyan)}
.input-with-p .unit{color:var(--muted);font-weight:800;font-size:14px}
.btn-max{
  height:32px;
  padding:0 10px;
  background:#fff;
  border:1.5px solid #b5c1cf;
  border-radius:6px;
  color:var(--navy);
  font-weight:800;
  font-size:12px;
  cursor:pointer;
}
.btn-max:hover{background:#f0fbfd;border-color:var(--cyan);color:var(--cyan-dark)}
.point-hint{
  margin:8px 0 0;
  font-size:11px;
  color:var(--muted);
}
.no-point{
  padding:14px 16px;
  background:#f8fbfc;
  border-radius:10px;
  color:var(--muted);
  font-size:13px;
  margin:0 0 16px;
}

/* 결제 요약 */
.summary-box{
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:16px 18px;
}
.summary-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 0;
  font-size:14px;
}
.summary-row + .summary-row{border-top:1px dashed #e2e9f0}
.summary-row b{color:var(--navy);font-weight:850}
.summary-row.discount{color:#c94a4a}
.summary-row.discount b{color:#c94a4a}
.summary-row.final{
  padding-top:14px;
  border-top:2px solid var(--navy);
  font-size:16px;
}
.summary-row.final span{font-weight:800;color:var(--navy)}
.summary-row.final b{font-size:22px;font-weight:950;color:var(--navy)}

/* 계좌 */
.bank-box{
  background:#f8fbfc;
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:16px 18px;
}
.bank-box.big{padding:20px 22px}
.bank-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 0;
  font-size:14px;
}
.bank-row + .bank-row{border-top:1px dashed #d5dfe9}
.bank-row span{color:var(--muted);font-weight:700;min-width:70px}
.bank-row b{color:var(--navy);font-weight:900;flex:1}
.bank-row .amount{color:var(--cyan-dark);font-size:20px}
.btn-copy{
  height:30px;
  padding:0 12px;
  background:var(--navy);
  color:#fff;
  border:0;
  border-radius:6px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.btn-copy:hover{background:var(--deep)}
.bank-notice{
  margin:10px 0 0;
  font-size:12px;
  color:var(--muted);
}

/* 동의 */
.p-agree{
  border-top:1px solid var(--line);
  padding-top:20px;
}
.agree{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  font-size:13px;
  color:#3a4d68;
  font-weight:600;
  cursor:pointer;
}
.agree input{width:18px;height:18px;accent-color:var(--cyan)}

/* 제출 */
.p-submit{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:10px;
  margin-top:8px;
}
.p-submit .btn{width:100%}

/* 완료 페이지 */
.complete-hero{
  text-align:center;
  padding:20px 0 24px;
}
.complete-check{
  width:70px;
  height:70px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--secondary), var(--cyan-dark));
  color:#fff;
  font-size:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 16px;
  box-shadow:0 10px 24px rgba(24,184,199,.28);
}
.complete-hero h1{
  margin:0 0 8px;
  color:var(--navy);
  font-size:22px;
  font-weight:950;
}
.complete-hero p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}
.complete-hero p b{color:var(--navy);font-family:'Courier New', monospace;font-weight:900}

.info-grid{
  display:grid;
  gap:0;
  border:1.5px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.info-grid > div{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  font-size:14px;
}
.info-grid > div:last-child{border-bottom:0}
.info-grid > div span{color:var(--muted);font-weight:700}
.info-grid > div b{color:var(--navy);font-weight:900}
.info-grid > div.highlight{
  background:#f0fbfd;
  border-top:2px solid var(--cyan);
}
.info-grid > div.highlight b{color:var(--cyan-dark);font-size:20px}

.notice-box{
  margin-top:16px;
  padding:16px 20px;
  background:#fff9ec;
  border-left:4px solid #f7c948;
  border-radius:10px;
}
.notice-box p{margin:0 0 10px;color:#7a5a10;font-weight:850;font-size:14px}
.notice-box ul{margin:0;padding-left:18px;color:#5d4610;font-size:13px;line-height:1.7}
.notice-box b{color:#3d2f0a;font-weight:900}

/* Flash */
.flash-container{
  max-width:720px;
  margin:12px auto 0;
  padding:0 20px;
}

/* Responsive */
@media(max-width:640px){
  .purchase-page{padding:20px 12px 60px}
  .purchase-wrap{padding:24px 20px}
  .option-grid{grid-template-columns:1fr 1fr}
  .field-grid{grid-template-columns:1fr}
  .p-submit{grid-template-columns:1fr}
  .p-submit .btn:first-child{order:2}
  .complete-check{width:56px;height:56px;font-size:28px}
}