/* ===================================================
   보험한판 고객 전용 페이지 — user.css
   (흰 톤 라이트 테마로 전환)
   =================================================== */

/* ── 디자인 토큰 (라이트 테마) ── */
:root {
  /* 브랜드 */
  --brand-blue:      #1769ff;
  --brand-blue-dark: #0d4ecf;
  --brand-blue-text: #2457A8; /* 밝은 배경 위 텍스트/아이콘용 진한 파랑 */
  --brand-green:     #17925F;
  --brand-orange:    #A85B00;
  --brand-cyan:      #2E8FA8;
  --brand-purple:    #6941C6;

  /* 표면 / 배경 (라이트) */
  --white:    #FFFFFF;
  --bg-tint:  #F4F7FB;        /* 페이지 배경 */
  --surface:  #FFFFFF;        /* 카드/패널 배경 */
  --border:   #E5EAF1;        /* 카드/구분선 테두리 */
  --accent-blue-soft: rgba(23,105,255,.08); /* 뱃지/하이라이트용 옅은 블루 */

  /* 텍스트 회색 스케일 (어두운 순서 — 밝은 배경 기준) */
  --gray-900: #172033;  /* 본문 텍스트 */
  --gray-700: #46536B;  /* 보조 텍스트 */
  --gray-600: #667085;  /* 흐린 텍스트 */
  --gray-400: #94A3B8;  /* placeholder / 비활성 */

  /* 파란 강조(버튼/링크) */
  --blue-accent: #1769ff;

  /* 상태색 */
  --danger:     #B42318;
  --danger-bg:  #FFF0EE;
  --warning:    #A85B00;
  --warning-bg: #FFF3DF;
  --success:    #127A53;
  --success-bg: #EAF8F2;

  /* 기존 이름 호환용 별칭 */
  --brand-dark: var(--gray-900);
  --line:   var(--border);
  --text:   var(--gray-900);
  --sub:    var(--gray-600);
  --blue:   var(--brand-blue);
  --red:    var(--danger);
  --orange: var(--brand-orange);
  --shadow: 0 8px 24px rgba(23,32,51,.08);
}



/* ── 리셋 ── */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; }


body {
  background: #F4F7FB;
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans KR", system-ui, sans-serif;
  color: var(--text);
  padding-bottom: 24px;
}


button, a { font: inherit; color: inherit; cursor: pointer; }


button { border: 0; background: none; }


a { text-decoration: none; }



/* ── 앱 레이아웃 ── */
.app { max-width: 430px; margin: 0 auto; background: var(--bg-tint); min-height: 100vh; box-shadow: 0 0 0 1px rgba(23,32,51,.04); }


.screen { display: none; padding: 14px 12px 22px; }


.screen.active { display: block; }



/* ── 상단 바 ── */
.top {
  height: 46px; display: flex; align-items: center; justify-content: space-between;
  margin: -14px -12px 8px; padding: 0 14px;
  position: sticky; top: 0; z-index: 11;
  background: var(--surface); color: var(--gray-900);
  border-bottom: 1px solid var(--border);
}


.logo       { font-size: 16px; font-weight: 950; letter-spacing: -.04em; color: var(--gray-900); }


.home-menu { display: flex; flex-direction: column; gap: 8px; }


.menu-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 15px 14px; width: 100%; text-align: left;
  box-shadow: 0 4px 14px rgba(23,32,51,.04);
}


.menu-item:active { background: var(--bg-tint); }


.menu-item.is-soon { opacity: .55; }


.menu-label { flex: 1; font-size: 14px; font-weight: 900; color: var(--gray-900); }


.menu-badge {
  font-size: 10px; font-weight: 950; padding: 3px 8px; border-radius: 999px;
  background: var(--bg-tint); border: 1px solid var(--line); color: var(--gray-400); flex-shrink: 0;
}


.tile-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}


.tile-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px 6px; display: flex; flex-direction: column; align-items: center;
  gap: 8px; text-align: center; box-shadow: 0 4px 14px rgba(23,32,51,.04);
}


.tile-card:active { background: var(--bg-tint); }


.tile-label { font-size: 12px; font-weight: 900; color: var(--gray-900); line-height: 1.3; }


.tile-card.is-soon { opacity: .5; }


.agent-carousel {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}


.agent-carousel::-webkit-scrollbar { display: none; }


.agent-mini-card {
  flex: 0 0 80%; max-width: 300px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 16px; text-align: left;
  box-shadow: 0 2px 8px rgba(23,32,51,.03);
  display: flex; align-items: center; gap: 12px;
}


.agent-mini-photo {
  width: 56px; height: 56px; border-radius: 999px; flex-shrink: 0;
  overflow: hidden; background: var(--bg-tint);
  border: 2px solid var(--border); display: flex; align-items: center; justify-content: center;
}


.agent-mini-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }


.agent-mini-info { flex: 1; min-width: 0; }


.agent-mini-name { font-size: 15px; font-weight: 950; margin-bottom: 2px; }


.agent-mini-company { font-size: 12px; color: var(--gray-600); margin-bottom: 10px; }


.agent-mini-btn {
  width: 100%; height: 34px; border-radius: 10px; background: var(--bg-tint);
  border: 1px solid var(--border); color: var(--brand-blue-text); font-size: 12px; font-weight: 900; cursor: pointer;
}



/* ── 스켈레톤 ── */
@keyframes skel-shine { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }


.skel {
  background: linear-gradient(90deg, var(--border) 25%, var(--bg-tint) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: skel-shine 1.4s ease infinite;
  border-radius: 6px; display: inline-block;
}


@keyframes stamp-in {
  0%   { opacity: 0; transform: rotate(-8deg) scale(2.2); }
  55%  { opacity: 1; transform: rotate(-8deg) scale(.88); }
  72%  { transform: rotate(-8deg) scale(1.08); }
  85%  { transform: rotate(-8deg) scale(.97); }
  100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}


.section { margin-top: 26px; }


.head    { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }


.head h2 { font-size: 15px; font-weight: 950; }


#agentCountBadge {
  font-size: 12px; font-weight: 900; color: var(--brand-blue-text);
  background: var(--bg-tint); border-radius: 999px; padding: 2px 9px; margin-left: 6px;
}


.notice-update-item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--bg-tint);
  min-width: 0;
}


.notice-update-item:last-child { border-bottom: none; }


.notice-update-date {
  font-size: 11px; font-weight: 900; color: var(--gray-400); flex-shrink: 0; white-space: nowrap;
}


.notice-update-text {
  font-size: 12.5px; font-weight: 800; color: var(--gray-700); line-height: 1.5;
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


.app-footer {
  max-width: 430px; margin: 0 auto; padding: 22px 16px 34px;
  text-align: center; font-size: 12px; color: var(--gray-400); font-weight: 800; line-height: 1.7;
}


@keyframes crSlideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }


.cr-tab-btn.active { background: var(--surface); color: var(--brand-blue-text); box-shadow: 0 2px 6px rgba(23,32,51,.08); }


.cr-method-chip.active {
  border-color: var(--brand-blue); background: var(--bg-tint); color: var(--brand-blue-text);
}


.rn    { width: 22px; height: 22px; border-radius: 999px; background: var(--brand-blue); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 950; }


.rn.r2 { background: var(--blue-accent); }


.rn.r3 { background: var(--brand-orange); }


.btn   { height: 45px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 950; font-size: 13px; }


.btn-p { background: linear-gradient(180deg,var(--blue-accent),var(--brand-blue)); color: var(--white); border: 0; }


.btn-o { border: 1px solid var(--border); color: var(--brand-blue-text); background: var(--surface); }


.cat-tab.active { background: var(--brand-blue); color: var(--white); border-color: var(--brand-blue); }


.stab.active { border-color: var(--brand-blue); }



.dok   { background: var(--brand-green); color: var(--white); }



/* ── 실손 카드 ── */
.silson-card        { padding: 14px 16px; margin-bottom: 12px; cursor: pointer; }


.silson-card-head   { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }


.silson-card-title-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }


.silson-card-icon   { width: 24px; height: 24px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-tint); font-size: 15px; flex: 0 0 auto; }


.silson-card-title  { font-size: 15px; line-height: 1.25; font-weight: 950; letter-spacing: -.04em; color: var(--gray-900); }


.silson-card-more   { font-size: 11px; line-height: 1; font-weight: 900; color: var(--gray-400); white-space: nowrap; }


.silson-card-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }


.silson-card-box    { background: var(--bg-tint); border: 1px solid var(--bg-tint); border-radius: 12px; padding: 10px 12px; min-width: 0; }


.silson-card-label  { font-size: 10px; line-height: 1.25; color: var(--gray-400); font-weight: 900; margin-bottom: 4px; letter-spacing: -.02em; }


.silson-card-value  { font-size: 14px; line-height: 1.25; font-weight: 950; letter-spacing: -.04em; color: var(--brand-blue-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


@keyframes spin { to { transform: rotate(360deg); } }


.dot  { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 11px; font-weight: 900; }


.dok  { background: var(--brand-green); }



/* ── 설계사 ── */
.ag-profile     { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 10px; }


.ag-profile-row { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }


.ag-photo       { width: 72px; height: 72px; border-radius: 999px; overflow: hidden; background: var(--bg-tint); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }


.ag-photo-img   { width: 100%; height: 100%; object-fit: cover; display: block; }


.ag-info        { flex: 1; min-width: 0; }


.ag-name-row    { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }


.ag-name        { font-size: 20px; font-weight: 1000; letter-spacing: -.05em; }


.ag-tag         { font-size: 10px; padding: 2px 7px; border-radius: 999px; background: var(--bg-tint); border: 1px solid var(--border); color: var(--brand-blue-text); font-weight: 950; }


.ag-company     { font-size: 12px; color: var(--gray-600); margin-bottom: 3px; }


.ag-slogan      { font-size: 12px; color: var(--gray-600); line-height: 1.5; }


.ag-btns        { display: grid; grid-template-columns: 1fr; }


.ag-full-btn    { width: 100%; height: 52px; border-radius: 14px; font-size: 15px; font-weight: 950; }


.ag-call        { background: var(--brand-blue); color: var(--white); border: 0; }


.ag-kakao       { background: var(--surface); border: 1px solid var(--border); color: var(--brand-blue-text); font-size: 13px; font-weight: 950; height: 40px; border-radius: 10px; }


.ag-grid        { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }


.ag-card        { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }


.ag-card-label  { font-size: 12px; color: var(--gray-600); margin-bottom: 10px; }


.sdot           { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 950; flex-shrink: 0; }


.sdot-on        { background: var(--brand-blue); color: var(--white); }


.ag-comment     { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 10px; }


.ag-comment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }


.ag-comment-title { font-size: 14px; font-weight: 950; }



/* ── 바텀시트 / 팝업 공통 ── */
.sheet-overlay { position: fixed; inset: 0; background: rgba(23,32,51,.45); z-index: 100; display: none; align-items: flex-end; justify-content: center; }


.sheet-overlay.open { display: flex; }


.sheet         { background: var(--surface); border-radius: 20px 20px 0 0; width: min(430px,100%); max-height: 80vh; overflow-y: auto; padding: 20px; position: relative; }


.sheet.silson-sheet { overflow-y: hidden; overflow: hidden; max-height: 82vh; height: 82vh; padding: 0; }


.sheet-handle  { width: 36px; height: 4px; background: var(--border); border-radius: 999px; margin: 0 auto 16px; }


.sheet-close   { position: absolute; right: 16px; top: 16px; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-tint); font-size: 16px; display: flex; align-items: center; justify-content: center; }


.sheet-title   { font-size: 16px; font-weight: 950; margin-bottom: 14px; }


.sg-list       { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }


.sg-item       { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }


.sg-item.cur   { border-color: var(--brand-blue); background: var(--bg-tint); }


.sg-item.cur .sg-name, .sg-item.cur .sg-desc { color: var(--brand-blue-text) !important; }


.sg-name       { font-size: 13px; font-weight: 950; margin-bottom: 3px; display: flex; align-items: center; gap: 7px; }


.sg-cur        { font-size: 10px; padding: 2px 7px; border-radius: 999px; background: var(--brand-blue); color: var(--white); }


.sg-desc       { font-size: 12px; color: var(--gray-600); line-height: 1.5; }



/* ── 상담 팝업 (cr-sheet과 동일한 바텀시트 톤으로 통일) ── */
.consult-overlay { position: fixed; inset: 0; background: rgba(23,32,51,.45); z-index: 200; display: none; align-items: flex-end; justify-content: center; padding: 0; }


.consult-overlay.open { display: flex; }


.consult-popup   { width: min(430px,100%); max-height: calc(100dvh - 24px); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-bottom: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -18px 40px rgba(23,32,51,.14); }


.consult-head    { padding: 14px 18px 16px; background: var(--surface); color: var(--gray-900); position: relative; }


.consult-handle  { width: 38px; height: 4px; margin: 0 auto 14px; border-radius: 999px; background: var(--gray-400); opacity: .4; }


.consult-close   { position: absolute; right: 14px; top: 14px; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-tint); color: var(--gray-700); font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; }


.consult-body    { padding: 4px 18px calc(20px + env(safe-area-inset-bottom)); }


.consult-info    { background: var(--bg-tint); border: 1px solid var(--border); border-radius: 14px; padding: 13px; margin-bottom: 12px; font-size: 12px; color: var(--gray-600); line-height: 1.5; }


.consult-btns    { display: flex; flex-direction: column; gap: 8px; }


.consult-cancel  { width: 100%; height: 42px; border-radius: 10px; background: var(--bg-tint); color: var(--gray-600); font-size: 13px; font-weight: 950; margin-top: 6px; }



/* =========================================================
   HOME SYNC BLOCK
   home.html 구조와 정확히 맞춘 홈 전용 스타일
   ========================================================= */

/* 앱 / 홈 기본 */
body{
  background:#F4F7FB;
}



.app{
  max-width:430px;
  margin:0 auto;
  background:var(--bg-tint);
  min-height:100vh;
  overflow:hidden;
  box-shadow: 0 0 40px rgba(23,32,51,.06);
}



.screen{
  padding:0 14px 28px;
}



.screen.active{
  display:block;
}



/* 상단 브랜드 */
.top{
  height:58px;
  margin:0 -14px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:20;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}



.brand-wrap{
  display:flex;
  align-items:center;
  gap:10px;
}



.logo{
  font-size:21px;
  font-weight:1000;
  color:var(--gray-900);
  letter-spacing:-.055em;
}



/* 상단 히어로 배너 */
.hero-banner{
  position:relative;
  min-height:158px;
  margin:0 -14px 10px;
  padding:18px 17px 16px;
  overflow:hidden;
  border:0;
  border-bottom:1px solid var(--border);
  border-radius:0;
  background:
    radial-gradient(circle at 85% 15%,rgba(23,105,255,.09),transparent 55%),
    var(--surface);
  box-shadow:none;
  --hero-faq-w: clamp(84px, 27vw, 130px);
}



.hero-content{
  position:relative;
  z-index:3;
  width:calc(100% - var(--hero-faq-w) - 20px);
  max-width:220px;
}



.hero-content h1{
  margin:0;
  color:var(--gray-900);
  font-size:23px;
  font-weight:1000;
  line-height:1.16;
  letter-spacing:-.06em;
}



.hero-content p{
  margin:10px 0 12px;
  color:var(--gray-600);
  font-size:11.5px;
  font-weight:750;
  line-height:1.55;
}



.hero-cta{
  min-width:145px;
  height:39px;
  padding:0 15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  border-radius:11px;
  color:#fff;
  background:linear-gradient(135deg,var(--brand-blue) 0%,var(--brand-blue-dark) 100%);
  box-shadow:0 8px 20px rgba(23,105,255,.30);
  font-size:12px;
  font-weight:950;
}



.hero-cta span{
  font-size:18px;
  line-height:1;
}



/* 오른쪽 미니 질문카드 */
.hero-faq-card{
  position:absolute;
  z-index:2;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:var(--hero-faq-w);
  padding:clamp(9px, 3vw, 12px) clamp(8px, 2.6vw, 10px);
  border-radius:14px;
  background:rgba(23,105,255,.05);
  border:1px solid rgba(23,105,255,.14);
}

.hero-faq-title{
  font-size:clamp(9px, 2.4vw, 11px);
  font-weight:900;
  color:var(--gray-600);
  line-height:1.3;
  margin-bottom:8px;
}

.hero-faq-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.hero-faq-item{
  display:block;
  font-size:clamp(9px, 2.3vw, 10.5px);
  font-weight:800;
  color:var(--gray-900);
  line-height:1.3;
  padding:6px clamp(6px, 2vw, 8px);
  border-radius:8px;
  background:rgba(23,32,51,.045);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}



/* 공지 한 줄 */
.notice-strip{
  width:100%;
  min-height:46px;
  margin-top:10px;
  padding:0 14px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 7px 18px rgba(23,32,51,.05);
  text-align:left;
}



.notice-strip-label{
  color:var(--brand-blue-text);
  font-size:12px;
  font-weight:1000;
  white-space:nowrap;
}



.notice-strip-text{
  min-width:0;
  color:var(--gray-600);
  font-size:11.5px;
  font-weight:750;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}



.notice-strip-arrow{
  color:var(--gray-400);
  font-size:19px;
  font-weight:900;
}



/* 공통 섹션 */
.home-panel{
  margin-top:0;
  padding-top:22px;
}



.compact-head{
  margin-bottom:11px;
}



.section-title-wrap{
  display:flex;
  flex-direction:column;
  gap:4px;
}



.head h2{
  color:var(--gray-900);
  font-size:18px;
  font-weight:1000;
  letter-spacing:-.05em;
}



.section-desc{
  color:var(--gray-400);
  font-size:11.5px;
  font-weight:600;
  line-height:1.45;
}



/* 내 보장 3칸 */
.tile-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}



.tile-card{
  min-width:0;
  min-height:84px;
  padding:18px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface);
  box-shadow:0 2px 8px rgba(23,32,51,.03);
  text-align:center;
}



.tile-card:active{
  transform:scale(.985);
  background:var(--bg-tint);
}



.tile-card.is-soon{
  opacity:.5;
  box-shadow:none;
  background:var(--bg-tint);
}



/* 내 보장 - 리스트형 (제목+설명+화살표를 세로로 쌓는 버전) */
.tile-list{
  display:flex;
  flex-direction:column;
  gap:9px;
}



.tile-row{
  width:100%;
  min-height:74px;
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface);
  box-shadow:0 2px 8px rgba(23,32,51,.03);
  text-align:left;
}



.tile-row:active{
  transform:scale(.99);
  background:var(--bg-tint);
}



.tile-row.is-soon{
  opacity:.5;
  box-shadow:none;
  background:var(--bg-tint) !important;
}



.tile-row-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}



.tile-row .tile-label{
  width:auto;
  font-size:14.5px;
  font-weight:1000;
  color:var(--gray-900);
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
}



.tile-row .tile-sub{
  width:auto;
  font-size:11px;
  font-weight:700;
  color:var(--gray-600);
  line-height:1.45;
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
}



.tile-row-arrow{
  flex:0 0 auto;
  color:var(--gray-400);
  font-size:20px;
  font-weight:700;
  line-height:1;
}



/* 내 보장 하단 2칸 (실손/표로 보기) */
.tile-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}



.tile-cell{
  min-width:0;
  padding:15px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface);
  box-shadow:0 2px 8px rgba(23,32,51,.03);
  text-align:left;
}



.tile-cell:active{
  transform:scale(.99);
  background:var(--bg-tint);
}



.tile-cell-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}



.tile-cell .tile-label{
  width:auto;
  font-size:14px;
  font-weight:1000;
  color:var(--gray-900);
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
}



.tile-cell .tile-sub{
  width:auto;
  font-size:10.5px;
  font-weight:700;
  color:var(--gray-600);
  line-height:1.4;
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
}



.tile-cell-arrow{
  flex:0 0 auto;
  color:var(--gray-400);
  font-size:16px;
  font-weight:700;
}



.tile-label{
  width:100%;
  color:var(--gray-900);
  font-size:13.5px;
  font-weight:1000;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}



.tile-sub{
  width:100%;
  color:var(--gray-400);
  font-size:9.5px;
  font-weight:700;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}



/* 질병 배너 */
.scenario-banner{
  position:relative;
  min-height:94px;
  padding:18px 18px 18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:19px;
  background:var(--surface);
  box-shadow:0 2px 8px rgba(23,32,51,.03);
}



.scenario-copy{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:6px;
}



.scenario-copy strong{
  color:var(--gray-900);
  font-size:14px;
  font-weight:1000;
  letter-spacing:-.035em;
}



.scenario-copy span{
  color:var(--gray-600);
  font-size:10.5px;
  font-weight:700;
}



.scenario-arrow{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  color:var(--gray-400);
  font-size:20px;
  font-weight:700;
  line-height:1;
}



/* 기타 및 이벤트 3열 그리드 */
.home-menu{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}



.menu-item{
  min-width:0;
  min-height:82px;
  padding:14px 12px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:6px;
  border:1px solid var(--border);
  border-radius:17px;
  box-shadow:0 2px 8px rgba(23,32,51,.03);
  text-align:left;
}



.menu-item:active{
  transform:scale(.985);
}



.menu-item.is-soon{
  opacity:.5;
  box-shadow:none;
  background:var(--bg-tint) !important;
}



.menu-blue{
  background:var(--surface);
}



.menu-yellow{
  background:var(--warning-bg);
}



.menu-mint{
  background:var(--success-bg);
}



.menu-cyan{
  background:var(--success-bg);
}



.menu-purple{
  background:var(--surface);
}



.menu-more-card{
  border-style:dashed;
  background:var(--bg-tint);
}



/* 더 이용해보세요 - 4칸 고정 퀵메뉴 (기존 home-menu 6칸 그리드를 대체) */
.quick-menu{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:start;
  gap:8px;
}



.quick-item{
  min-width:0;
  min-height:60px;
  padding:10px 9px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:4px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 2px 8px rgba(23,32,51,.03);
  text-align:left;
}



.quick-item:active{
  transform:scale(.985);
  background:var(--bg-tint);
}



.quick-item.is-soon{
  opacity:.55;
  box-shadow:none;
  background:var(--bg-tint);
}



.quick-label{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
  width:100%;
  color:var(--gray-900);
  font-size:12.5px;
  font-weight:1000;
  line-height:1.3;
  letter-spacing:-.03em;
  word-break:keep-all;
}



.quick-badge{
  font-size:8.5px;
  font-weight:900;
  padding:2px 6px;
  border-radius:999px;
  background:var(--bg-tint);
  border:1px solid var(--border);
  color:var(--gray-400);
  white-space:nowrap;
}



.quick-desc{
  width:100%;
  color:var(--gray-400);
  font-size:9px;
  font-weight:700;
  line-height:1.35;
  word-break:keep-all;
}



/* 더 많은 서비스 팝업 (cr-sheet과 동일한 바텀시트 톤) */
.more-services-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
  align-items:flex-end;
  justify-content:center;
  background:rgba(23,32,51,.45);
  padding:0;
}



.more-services-overlay.open{
  display:flex;
}



.more-services-sheet{
  position:relative;
  width:min(430px,100%);
  max-height:calc(100dvh - 24px);
  overflow-y:auto;
  padding:14px 18px calc(20px + env(safe-area-inset-bottom));
  border:1px solid var(--border);
  border-bottom:0;
  border-radius:22px 22px 0 0;
  background:var(--surface);
  box-shadow:0 -18px 40px rgba(23,32,51,.14);
  display:flex;
  flex-direction:column;
  gap:9px;
}



.ms-title{
  color:var(--gray-900);
  font-size:17px;
  font-weight:950;
  letter-spacing:-.04em;
  margin-bottom:2px;
}



.ms-sub{
  color:var(--gray-600);
  font-size:12px;
  font-weight:700;
  margin-bottom:6px;
}



.menu-label{
  width:100%;
  color:var(--gray-900);
  font-size:12px;
  font-weight:1000;
  line-height:1.35;
  letter-spacing:-.035em;
  word-break:keep-all;
}



.menu-desc{
  color:var(--gray-400);
  font-size:9.5px;
  font-weight:700;
  line-height:1.35;
}



.menu-badge{
  min-height:20px;
  padding:3px 7px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  background:rgba(23,32,51,.05);
  color:var(--gray-600);
  font-size:9px;
  font-weight:900;
}



/* 설계사 하단 카드 */
.agent-bottom-card{
  margin-top:20px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--surface);
  box-shadow:0 2px 8px rgba(23,32,51,.03);
}



.agent-bottom-card .head{
  margin-bottom:11px;
}



.agent-bottom-card .ag-profile{
  margin:0;
  background:var(--surface);
  box-shadow:none;
  border:0;
  padding:0;
}



/* 모바일 세부 */
@media(max-width:370px){

  .screen{
    padding-left:12px;
    padding-right:12px;
  }


  .top{
    margin-left:-12px;
    margin-right:-12px;
  }


  .hero-banner{
    min-height:150px;
    padding:16px 14px 14px;
    margin-left:-12px;
    margin-right:-12px;
  }


  .hero-content{
    width:calc(100% - 98px);
  }


  .hero-content h1{
    font-size:21px;
  }


  .hero-faq-card{
    right:10px;
  }


  .tile-card{
    min-height:76px;
  }


  .home-menu{
    gap:7px;
  }


  .menu-item{
    min-height:78px;
    padding:12px 10px;
  }


  .menu-label{
    font-size:12px !important;
  }


  .tile-row{
    min-height:auto;
    padding:14px 15px;
    gap:10px;
  }


  .tile-row .tile-label{
    font-size:13.5px;
  }


  .tile-row .tile-sub{
    font-size:10.5px;
  }


  .tile-grid-2{
    gap:7px;
  }


  .tile-cell{
    padding:13px 14px;
  }


  .tile-cell .tile-label{
    font-size:13px;
  }


  .tile-cell .tile-sub{
    font-size:10px;
  }


  .quick-item{
    min-height:56px;
    padding:9px 7px;
  }


  .quick-label{
    font-size:11.5px;
  }


  .quick-desc{
    font-size:8.5px;
  }
}


/* 폴드폰 커버 화면 등 아주 좁은 화면 - 내 보장 2칸 그리드 / 퀵메뉴 4칸을 2칸으로 접음 */
@media(max-width:300px){

  .tile-grid-2{
    grid-template-columns:1fr;
  }


  .quick-menu{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}





/* =========================================================
   ICONS + COLOR SIMPLIFY
   컬러 대신 흰색/무채색 톤 + 폰트 굵기로 위계 표현
   (지금 할 수 있는 액션 = 흰 배경 + 진한 텍스트,
    준비중 = .is-soon 규칙으로 이미 톤다운됨)
========================================================= */

.menu-blue,
.menu-mint,
.menu-cyan,
.menu-purple,
.menu-yellow{
  background:var(--surface)!important;
  border-color:var(--border)!important;
}

.menu-blue .menu-label,
.menu-yellow .menu-label{
  color:var(--gray-900)!important;
}

.menu-mint .menu-label,
.menu-cyan .menu-label,
.menu-purple .menu-label,
.menu-more-card .menu-label{
  color:var(--gray-900)!important;
}

.menu-more-card{
  background:var(--bg-tint)!important;
  border-color:var(--border)!important;
}

.menu-desc{
  color:var(--gray-400)!important;
}


/* =========================================================
   상담 신청 모달 (.cr-*) — 기존엔 .active 상태 스타일만 있고
   뼈대 자체가 없어서 모달이 안 보이던 것을 채워넣음
========================================================= */

.cr-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  align-items:flex-end;
  justify-content:center;
  background:rgba(23,32,51,.45);
  padding:0;
}

.cr-overlay.open{
  display:flex;
}

.cr-sheet{
  position:relative;
  width:min(430px,100%);
  max-height:calc(100dvh - 24px);
  overflow-y:auto;
  padding:14px 18px calc(20px + env(safe-area-inset-bottom));
  border:1px solid var(--border);
  border-bottom:0;
  border-radius:22px 22px 0 0;
  background:var(--surface);
  box-shadow:0 -18px 40px rgba(23,32,51,.14);
}

.cr-handle{
  width:38px;
  height:4px;
  margin:0 auto 14px;
  border-radius:999px;
  background:var(--gray-400);
  opacity:.4;
}

.cr-close{
  position:absolute;
  top:14px;
  right:14px;
  width:32px;
  height:32px;
  border:1px solid var(--border);
  border-radius:50%;
  background:var(--bg-tint);
  color:var(--gray-700);
  font-size:15px;
  line-height:1;
  cursor:pointer;
}

.cr-title{
  color:var(--gray-900);
  font-size:17px;
  font-weight:950;
  letter-spacing:-.04em;
  margin-bottom:4px;
  padding-right:40px;
}

.cr-sub{
  color:var(--gray-600);
  font-size:12px;
  font-weight:700;
  margin-bottom:16px;
}

.cr-tabs{
  display:flex;
  gap:4px;
  margin-bottom:16px;
  padding:4px;
  border-radius:12px;
  background:var(--bg-tint);
}

.cr-tab-btn{
  flex:1;
  height:38px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--gray-400);
  font-size:12.5px;
  font-weight:900;
  cursor:pointer;
}

.cr-tab-panel{
  width:100%;
}

.cr-label{
  color:var(--gray-900);
  font-size:12.5px;
  font-weight:900;
  margin-bottom:9px;
}

.cr-label-sub{
  color:var(--gray-400);
  font-size:11px;
  font-weight:700;
}

.cr-method-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.cr-method-chip{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  height:64px;
  padding:0;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  color:var(--gray-600);
  cursor:pointer;
  text-align:center;
}

.cr-method-icon{
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gray-600);
  line-height:0;
}

.cr-method-icon svg{
  display:block;
}

.cr-method-chip.active .cr-method-icon{
  color:var(--brand-blue);
}

.cr-method-label{
  font-size:11.5px;
  font-weight:850;
}

.cr-guest-box{
  margin-top:12px;
  display:flex;
  flex-direction:column;
}

.cr-input{
  width:100%;
  height:44px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--bg-tint);
  color:var(--gray-900);
  font-size:13px;
  font-weight:700;
}

.cr-textarea{
  width:100%;
  min-height:76px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--bg-tint);
  color:var(--gray-900);
  font-size:13px;
  font-weight:700;
  resize:vertical;
}

.cr-message-count{
  margin-top:5px;
  text-align:right;
  color:var(--gray-400);
  font-size:10.5px;
  font-weight:800;
}

.cr-message-count.is-max{
  color:var(--danger);
}

.cr-agree-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:14px;
  cursor:pointer;
}

.cr-agree-checkbox{
  margin-top:2px;
  width:16px;
  height:16px;
  flex:0 0 auto;
  accent-color:var(--brand-blue);
}

.cr-agree-text{
  color:var(--gray-600);
  font-size:11.5px;
  font-weight:700;
  line-height:1.5;
}

.cr-agree-link{
  color:var(--brand-blue-text);
  font-weight:850;
  text-decoration:underline;
  margin-left:2px;
}

.cr-submit{
  width:100%;
  height:48px;
  margin-top:16px;
  border:0;
  border-radius:12px;
  background:linear-gradient(180deg,var(--blue-accent),var(--brand-blue));
  color:var(--white);
  font-size:14px;
  font-weight:950;
  cursor:pointer;
}

.cr-direct-item{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  color:inherit;
  text-decoration:none;
  margin-bottom:10px;
  text-align:left;
  cursor:pointer;
}

.cr-direct-icon{
  font-size:20px;
  flex:0 0 auto;
}

.cr-direct-body{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.cr-direct-title{
  color:var(--gray-900);
  font-size:13.5px;
  font-weight:900;
}

.cr-direct-desc{
  color:var(--gray-400);
  font-size:10.5px;
  font-weight:700;
  line-height:1.5;
}


/* =========================================================
   실손 바텀시트 콘텐츠 전용
   (silson.js가 #silsonSidebar/#silsonPanel에 그리는 클래스들 -
    coverage.css에만 있고 home.css엔 없어서 home.html에서 깨졌던 부분)
========================================================= */

.silson-side-item{
  position:relative;
  width:100%;
  padding:13px 10px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  border:0;
  border-bottom:1px solid var(--border);
  background:transparent;
  color:var(--gray-600);
  text-align:left;
}

.silson-side-item.active{
  background:var(--surface);
}

.silson-side-item.active::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:2px;
  background:var(--brand-blue-text);
}

.silson-side-name{
  color:inherit;
  font-size:11.5px;
  font-weight:950;
  line-height:1.35;
}

.silson-side-item.active .silson-side-name{
  color:var(--gray-900);
}

.silson-side-badge,
.silson-side-note{
  font-size:9px;
  font-weight:900;
  line-height:1.2;
}

.silson-side-badge{
  color:var(--brand-blue-text);
}

.silson-side-note{
  color:var(--gray-400);
}

.silson-panel-head{
  position:relative;
  margin-bottom:12px;
  padding-right:72px;
}

.silson-panel-title{
  color:var(--gray-900);
  font-size:16px;
  font-weight:950;
  line-height:1.3;
}

.silson-panel-period{
  margin-top:3px;
  color:var(--gray-400);
  font-size:10.5px;
  font-weight:750;
}

.silson-panel-badge{
  position:absolute;
  top:0;
  right:0;
  padding:4px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--bg-tint);
  color:var(--brand-blue-text);
  font-size:9.5px;
  font-weight:900;
}

.silson-summary-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-bottom:10px;
}

.silson-summary-item{
  min-width:0;
  padding:10px 11px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--bg-tint);
}

.silson-summary-label{
  margin-bottom:4px;
  color:var(--gray-400);
  font-size:9.5px;
  font-weight:850;
  line-height:1.3;
}

.silson-summary-value{
  color:var(--gray-900);
  font-size:10.5px;
  font-weight:900;
  line-height:1.45;
  word-break:keep-all;
}

.silson-summary-value.is-warning{
  color:var(--warning);
}

#silsonSidebar{
  width:96px;
  flex:0 0 96px;
}

#silsonSidebar > *{
  width:100%;
}

@media(max-width:370px){
  #silsonSidebar{
    width:88px;
    flex-basis:88px;
  }
}


/* ── sheet-card 계열 (common.css에 있고 home.css엔 없었던 것 -
     실손 시트 안 "보장 항목", "설계사 조언" 등 대부분의 블록이 이걸 씀) ── */
.sheet-card{
  margin-bottom:10px;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--bg-tint);
}

.sheet-card-title{
  margin-bottom:7px;
  color:var(--gray-900);
  font-size:11px;
  font-weight:950;
  line-height:1.35;
}

.sheet-card-text{
  color:var(--gray-700);
  font-size:11px;
  font-weight:750;
  line-height:1.65;
}

.sheet-card-list{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.sheet-card-row{
  position:relative;
  padding-left:11px;
  color:var(--gray-700);
  font-size:11px;
  font-weight:750;
  line-height:1.55;
}

.sheet-card-row::before{
  content:"";
  position:absolute;
  left:0;
  top:.68em;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--gray-400);
}

.sheet-note{
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  color:var(--gray-600);
  font-size:10.5px;
  font-weight:750;
  line-height:1.55;
}