/* 진주컴퓨터 맞춤견적 - 화면 꾸미기
   폰 화면을 기준으로 먼저 만들고, 넓은 화면은 아래쪽 @media 에서 맞춥니다. */

/* 이 한 줄이 맨 위에 있어야 합니다.
   .actions 같은 것이 display:flex 라서, 이게 없으면 hidden 으로 숨겨지지 않습니다. */
[hidden] { display: none !important; }

:root{
  --navy:#0B1F3A;
  --blue:#2478FF;
  --blue-d:#1B5FD0;
  --mint:#A6D4D4;
  --pale:#DCEEFB;
  --gray:#5B6B7B;
  --line:#E4EAF0;
  --bg:#EFF4F8;
  --card:#FFFFFF;
  --sh:0 1px 3px rgba(11,31,58,.06), 0 6px 20px rgba(11,31,58,.05);
  --r:16px;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--navy);
  font-family:Pretendard,'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  word-break:keep-all;
}

.wrap{
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding-inline:16px;
}

/* ---------- 머리말 ---------- */

.top{
  background:var(--navy);
  color:#fff;
  /* 앱으로 설치하면 화면 맨 위(시계·배터리 자리)까지 올라오므로 그만큼 더 띄운다.
     브라우저에서는 env() 값이 0이라 그대로 22px 이다. */
  padding-block:calc(22px + env(safe-area-inset-top)) 26px;
}
.top .brand{
  display:flex; align-items:center; gap:7px;
  font-size:14px; font-weight:700;
  color:var(--mint);
  letter-spacing:.01em;
}
.top .logo{ font-size:17px; }
.top h1{
  margin:10px 0 6px;
  font-size:24px; font-weight:800; line-height:1.3;
  letter-spacing:-.02em;
}
.top .lead{
  margin:0;
  font-size:14.5px;
  color:#B9C7D8;
}

/* ---------- 진행 단계 ---------- */

.steps{
  display:flex; gap:6px;
  margin-top:-14px; margin-bottom:16px;
  overflow-x:auto;
  padding-block:4px;
  scrollbar-width:none;
}
.steps::-webkit-scrollbar{ display:none; }
.dot{
  flex:0 0 auto;
  padding:9px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  font-size:13px; font-weight:600;
  color:var(--gray);
  white-space:nowrap;
}
.dot.on{ background:var(--blue); border-color:var(--blue); color:#fff; }
.dot.done{ background:var(--pale); border-color:var(--pale); color:var(--blue-d); }

/* ---------- 카드 ---------- */

.panel{
  background:var(--card);
  border-radius:var(--r);
  box-shadow:var(--sh);
  padding:20px 16px;
  margin-bottom:16px;
}
.panel h2{
  margin:0 0 4px;
  font-size:19px; font-weight:800;
  letter-spacing:-.02em;
}
.panel .sub{
  margin:0 0 16px;
  font-size:14px;
  color:var(--gray);
}
.notice{ border-top:3px solid #E8623F; }
.notice .small{ font-size:14px; color:var(--gray); }

/* ---------- 고르는 칸 ---------- */

.grid{ display:grid; gap:9px; grid-template-columns:1fr; }

.opt{
  display:flex; align-items:flex-start; gap:11px;
  padding:14px;
  border:1.5px solid var(--line);
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  transition:border-color .12s, background .12s;
  -webkit-tap-highlight-color:transparent;
}
.opt:active{ background:#F7FAFD; }
.opt.sel{ border-color:var(--blue); background:#F5F9FF; }
.opt input{ position:absolute; opacity:0; pointer-events:none; }

.opt .box{
  flex:0 0 auto;
  width:22px; height:22px;
  margin-top:1px;
  border:1.5px solid #C5D0DC;
  border-radius:6px;
  background:#fff;
  color:transparent;
  font-size:14px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.opt.round .box{ border-radius:50%; }
.opt.sel .box{ background:var(--blue); border-color:var(--blue); color:#fff; }

.opt .txt{ font-size:15.5px; font-weight:600; line-height:1.45; }
.opt .sub2{
  display:block;
  margin-top:3px;
  font-size:13px; font-weight:500;
  color:var(--gray);
}
.opt .emo{ margin-right:3px; }

/* ---------- 묶음 ---------- */

.block{ margin-bottom:20px; }
.block:last-of-type{ margin-bottom:0; }
.blockhead{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  margin-bottom:10px;
  font-size:16px; font-weight:800;
}
.blockhead .ico{ font-size:18px; }
.blockhead .tag{
  padding:3px 9px;
  border-radius:999px;
  background:var(--pale);
  color:var(--blue-d);
  font-size:12px; font-weight:700;
}

/* ---------- 버튼 ---------- */

.actions{
  display:flex; gap:9px;
  margin-top:20px;
}
button{
  font-family:inherit;
  font-size:16.5px; font-weight:700;
  border-radius:12px;
  border:none;
  padding:15px 18px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.primary{ flex:1; background:var(--blue); color:#fff; }
.primary:active{ background:var(--blue-d); }
.primary:disabled{ background:#C8D3DF; cursor:default; }
.ghost{
  flex:0 0 auto;
  background:#fff;
  color:var(--gray);
  border:1.5px solid var(--line);
  padding-inline:20px;
}

/* ---------- 결과 ---------- */

.tier{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tierbadge{
  padding:6px 13px;
  border-radius:999px;
  background:var(--navy);
  color:#fff;
  font-size:14px; font-weight:800;
}
.tier .uses{ font-size:14.5px; color:var(--gray); }

.pricebox{
  margin-top:14px;
  background:var(--navy);
  color:#fff;
  border-radius:var(--r);
  padding:20px 16px;
}
.pricebox .lbl{ font-size:13.5px; color:var(--mint); font-weight:700; }
.pricebox .amt{
  margin:6px 0 10px;
  font-size:31px; font-weight:800;
  letter-spacing:-.03em;
  line-height:1.15;
}
.pricebox .mid{
  font-size:14px; color:#B9C7D8;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.15);
  margin-bottom:10px;
}
.pricebox .mid b{ color:#fff; }
.pricebox .note{ font-size:13.5px; color:#9FB0C4; }
.pricebox .note b{ color:#fff; }

table{ width:100%; border-collapse:collapse; }
th, td{
  text-align:left;
  padding:11px 0;
  border-bottom:1px solid var(--line);
  vertical-align:top;
  font-size:15px;
}
th{
  width:38%;
  font-weight:600;
  color:var(--gray);
  padding-right:10px;
}
td b{ font-weight:700; }
td .note{
  display:block;
  margin-top:3px;
  font-size:13px; font-weight:500;
  color:var(--gray);
}
tr:last-child th, tr:last-child td{ border-bottom:none; }

.reasons{
  background:#F5F9FF;
  border:1px solid var(--pale);
  border-radius:12px;
  padding:15px;
  font-size:14.5px;
}
.reasons b{ display:block; margin-bottom:7px; }
.reasons ul{ margin:0; padding-left:18px; }
.reasons li{ margin-bottom:5px; color:var(--gray); }
.reasons li:last-child{ margin-bottom:0; }

.disclaim{
  font-size:12.5px;
  color:var(--gray);
  line-height:1.6;
  margin:16px 0 0;
}

/* ---------- 상담 신청 ---------- */

.field{ margin-bottom:12px; }
.field label{
  display:block;
  margin-bottom:6px;
  font-size:14px; font-weight:700;
}
.field input{
  width:100%;
  font-family:inherit;
  font-size:16.5px;
  padding:14px;
  border:1.5px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--navy);
}
.field input:focus{ outline:none; border-color:var(--blue); }

.agree{
  display:flex; align-items:flex-start; gap:10px;
  margin:14px 0 4px;
  font-size:13.5px;
  color:var(--gray);
  cursor:pointer;
}
.agree input{ margin-top:3px; width:18px; height:18px; flex:0 0 auto; accent-color:var(--blue); }
.agree a{ color:var(--blue-d); }

.cta{
  background:var(--navy);
  color:#fff;
  border-radius:var(--r);
  padding:22px 16px;
  margin-top:16px;
}
.cta h3{ margin:0 0 8px; font-size:18px; font-weight:800; }
.cta p{ margin:0 0 14px; font-size:14.5px; color:#B9C7D8; }
.cta .info{
  background:rgba(255,255,255,.08);
  border-radius:12px;
  padding:14px;
  font-size:14.5px;
  line-height:1.8;
}
.cta .tel{
  display:block;
  margin-top:12px;
  padding:15px;
  border-radius:12px;
  background:var(--blue);
  color:#fff;
  font-size:17px; font-weight:800;
  text-align:center;
  text-decoration:none;
}

/* ---------- 알림 ---------- */

.toast{
  position:fixed;
  left:50%; bottom:24px;
  transform:translateX(-50%) translateY(14px);
  background:var(--navy);
  color:#fff;
  padding:13px 20px;
  border-radius:999px;
  font-size:14.5px; font-weight:600;
  box-shadow:0 8px 28px rgba(11,31,58,.28);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s, transform .2s;
  z-index:50;
  max-width:calc(100% - 32px);
  text-align:center;
}
.toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- 꼬리말 ---------- */

.foot{
  margin-top:8px;
  /* 아이폰 홈바에 글자가 가리지 않게 아래쪽도 띄운다 */
  padding-block:24px calc(34px + env(safe-area-inset-bottom));
  font-size:13.5px;
  line-height:1.8;
  color:var(--gray);
}
.foot b{ color:var(--navy); }

/* ---------- 넓은 화면 ---------- */

@media (min-width:600px){
  .wrap{ padding-inline:20px; }
  .top{ padding-block:calc(30px + env(safe-area-inset-top)) 34px; }
  .top h1{ font-size:30px; }
  .panel{ padding:26px 24px; border-radius:18px; }
  .panel h2{ font-size:22px; }
  .grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .pricebox{ padding:26px 24px; }
  .pricebox .amt{ font-size:38px; }
  .cta{ padding:26px 24px; }
  th{ width:32%; }
}

@media (min-width:860px){
  .grid{ grid-template-columns:repeat(3,1fr); }
  /* 예산·모니터처럼 항목이 적은 줄은 3칸이 어색해서 그대로 둡니다 */
  #monCountGrid{ grid-template-columns:repeat(3,1fr); }
}