@charset "utf-8";
/* ===================================================================
NH농협생명 - 계약현황 (Figma 90:13)
=================================================================== */

/* Pretendard 폰트 적용 (main.html의 #container.main과 동일) */
#container.new_submain,#container.new_submain input,#container.new_submain select,#container.new_submain button,#container.new_submain textarea{font-family:'Pretendard','NotoSans','roboto','Apple SD Gothic Neo','Malgun Gothic','맑은 고딕',sans-serif}

/* hover 텍스트 데코레이션 제거 (a.faq-link:hover 는 명시도 우선으로 유지) */
a:hover,a:focus,a:active{text-decoration:none}

/* --- sub page layout -------------------------------------------- */
.sub-layout{width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:100px;padding-bottom:20px}
#container{width:1280px;margin:0 auto;padding-bottom:50px}
/* input[type="text"]{background:#f0f2f8;width:100%;height:40px;border-radius:16px;border:0;padding:0 16px;font-size:var(--hfsize3)}*/
#container.new_submain {width:1440px;} 

/* ============================================================
마이페이지 영역 (Figma 480:169)
============================================================ */
.mypage{display:flex;flex-direction:column;gap:48px;width:100%}
.mypage .quick-menu{margin-bottom:0}

/* --- 인사·프로필 (Figma 130:32) --------------------------------- */
.welcome-card{background:linear-gradient(to right,#f2faff,#e2f5ff);border-radius:20px;padding:20px 40px;display:flex;align-items:center;gap:48px;height:188px}
.profile-photo{width:148px;height:148px;border-radius:80px;border:3px solid var(--color_white);overflow:hidden;flex-shrink:0}
.profile-photo img{width:100%;height:100%;object-fit:cover}
.welcome-info{display:flex;flex-direction:column;gap:15px;flex:1;min-width:0}
.welcome-row{display:flex;align-items:center;justify-content:space-between;gap:30px}
.welcome-name{margin:0;font-size:32px;line-height:1.2;color:var(--c-text)}
.welcome-name strong{font-weight:var(--fweight700)}
.welcome-sub{margin:0;font-size:var(--hfsize3);font-weight:var(--fweight400);color:var(--c-sub);white-space:normal;letter-spacing:-0.05em}
.logout-row{display:flex;gap:10px;align-items:center}
.logout-row .nhlife_ico{--sizeFix:30px}
.session-time{font-size:var(--hfsize6);color:var(--color_gray05);white-space:nowrap;text-decoration:underline}
.session-extend{font-weight:var(--fweight700)}
.logout-btn{font-size:var(--hfsize6);font-weight:var(--fweight700);color:var(--color_gray05);text-decoration:underline;white-space:nowrap}
.welcome-actions{display:flex;gap:15px;align-items:center}
.welcome-btn{background:var(--color_white);border:1px solid rgba(202,210,214,0.5);border-radius:8px;padding:8px;font-size:16px;color:var(--c-text);cursor:pointer;white-space:nowrap;line-height:1;font-weight:var(--fweight400);font-family:'NotoSans','Pretendard',sans-serif}
.welcome-btn-date{font-weight:var(--fweight300)}

/* --- MY보험업무영역 (Figma 90:41) ------------------------------- */
.insurance-work{background:var(--color_white);border-radius:32px;filter:drop-shadow(0 0 4px rgba(0, 0, 0, 0.15));display:flex;flex-direction:column;gap:32px;padding:48px 40px;align-items:center}

/* 탭메뉴 */
.my-tabs{display:flex;gap:24px;align-items:center;justify-content:center}
.my-tab{display:flex;align-items:center;justify-content:center;height:51px;padding:14px 52px;border-radius:30px;font-size:22px;cursor:pointer;white-space:nowrap;border:none;transition:background .2s var(--ease),color .2s var(--ease);font-weight:var(--fweight500);font-family:'NotoSans','Pretendard',sans-serif;color:var(--color_black);background:#e6f0fb}
.my-tab.is-active{background:var(--c-blue);color:var(--color_white);font-weight:var(--fweight700);border:1px solid #cad2d6}
.my-tab:hover:not(.is-active){background:var(--c-blue-light)}

/* hidden 속성이 display:flex 에 덮이지 않도록 보장 */
[hidden]{display:none!important}

/* 계약 패널 */
.insurance-panel{display:flex;flex-direction:column;gap:40px;align-items:center;width:100%}

/* 계약 요약 정보 */
.contract-summary{display:flex;gap:80px;align-items:center;font-size:22px;font-weight:var(--fweight500);color:#536876}
.contract-summary p{margin:0}
.contract-summary em{color:var(--c-blue);font-style:normal}

/* 계약 목록 */
.contract-list{display:flex;flex-direction:column;gap:16px;align-items:center;overflow:hidden;width:100%}
.contract-item{background:#f8f8f8;border-radius:48px;padding:16px 48px;display:flex;flex-direction:column;gap:8px;width:92%;color:inherit;text-decoration:none;transition:background .2s var(--ease)}  /* <a>로 사용: 링크 기본색/밑줄 상속 제거 (2026-07-02) */
#panel-contract .contract-item:hover, #panel-contract .contract-item:focus-visible{background:#e6f0fb}  /* 통째 링크 호버/키보드 포커스 배경 (2026-07-02) */
#divLoanList a:hover, #divLoanList a:focus-visible, #divLoanList a:focus-visible {background:#e6f0fb}  /* 통째 링크 호버/키보드 포커스 배경 (2026-07-02) */

.contract-top{display:flex;gap:10px;align-items:center}
.contract-badge{display:inline-flex;align-items:center;justify-content:center;background:#002cb1;border-radius:32px;padding:5px 8px;font-size:14px;font-weight:var(--fweight400);color:var(--color_white);white-space:nowrap;flex-shrink:0}
.contract-badge.lapse{background:#8a5a00}
.contract-badge.payment{background:#00666a}
.contract-badge.overdue{background:#000000}
.contract-title{margin:0;font-size:20px;font-weight:var(--fweight500) ! important;color:#536876;white-space:nowrap}
.contract-detail{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:flex-start;font-size:18px;white-space:nowrap}
.contract-num{font-weight:var(--fweight400)}
.contract-date{text-align:center}
.contract-premium{text-align:right}
.contract-date em,.contract-premium em{color:var(--c-blue);font-style:normal;font-weight:var(--fweight700)}

/* 페이지네이션 */
.contract-paginate{display:flex;gap:28px;align-items:center;padding:0 16px;border-radius:24px}
.paginate-info{font-size:var(--hfsize3);font-family:'NotoSans','Pretendard',sans-serif}
.paginate-info strong{font-weight:var(--fweight700)}
.paginate-info span{font-size:var(--fsize1);color:#979797}
/* 이전/다음 화살표 */
.paginate-btn{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;position:relative;border:0;background:none;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.paginate-btn:disabled{opacity:0.3;cursor:default}
.paginate-prev::before{content:'';display:block;width:10px;height:10px;border-top:2.5px solid var(--color_black);border-left:2.5px solid var(--color_black);transform:rotate(-45deg) translate(2px,0)}
.paginate-next::before{content:'';display:block;width:10px;height:10px;border-top:2.5px solid var(--color_black);border-right:2.5px solid var(--color_black);transform:rotate(45deg) translate(-2px,0)}

/* --- 대출/청구현황 테이블 패널 --------------------------------- */
.panel-table{display:flex;flex-direction:column;gap:16px;align-items:stretch;overflow:hidden;width:100%}

/* 헤더/행 공통 레이아웃 */
.panel-tbl-head,.panel-tr{display:flex;align-items:flex-start;padding:0 20px 0 30px}
.panel-tr{font-size:18px;background:#f8f8f8;border-radius:32px;padding:16px 20px 16px 30px}

/* 헤더 컬럼 */
.panel-th{font-size:var(--fsize1);font-weight:var(--fweight500);color:var(--color_black);flex-shrink:0}

/* 데이터 컬럼 */
.panel-td{font-weight:var(--fweight400);color:var(--color_black);flex-shrink:0;line-height:1.1}
.panel-td-em em{color:var(--c-blue)}
.product-sub{font-size:var(--fsize1);white-space:nowrap}

/* 대출 컬럼 너비 (gap 84px) */
.loan-cols{justify-content:space-between}
.loan-cols .panel-th:nth-child(1),.loan-cols .panel-td:nth-child(1){width:183px}
.loan-cols .panel-th:nth-child(2),.loan-cols .panel-td:nth-child(2){width:95px}
.loan-cols .panel-th:nth-child(3),.loan-cols .panel-td:nth-child(3){width:95px}
.loan-cols .panel-th:nth-child(4),.loan-cols .panel-td:nth-child(4){width:95px;text-align:right}
.loan-cols .panel-th:nth-child(5),.loan-cols .panel-td:nth-child(5){width:228px;text-align:right}

/* 청구현황 컬럼 너비 (gap 56px) */
.claim-cols{justify-content:flex-start;gap:30px}
.panel-tr.claim-cols{align-items:center;font-size: var(--hfsize4);color:var(c-text)}
.claim-cols .panel-th:nth-child(1),.claim-cols .panel-td:nth-child(1){width:160px}
.claim-cols .panel-th:nth-child(2),.claim-cols .panel-td:nth-child(2){flex:1;}
.claim-cols .panel-th:nth-child(3),.claim-cols .panel-td:nth-child(3){width:120px}
.claim-cols .panel-th:nth-child(4),.claim-cols .panel-td:nth-child(4){width:150px}
.claim-cols .panel-th:nth-child(5),.claim-cols .panel-td:nth-child(5){width:140px}

/* 청구현황 요약 행 */
.claim-summary{width:100%}
.claim-top-row{display:flex;gap:60px;align-items:center;justify-content:center;width:100%;flex-wrap:nowrap}
.claim-top-row > form {width:min-content}
.claim-filter-btn.claim-filter-date > input[type="text"] {width:100px;height:30px;border:0;border-radius:0;padding:0;background:none}
.claim-counts{display:flex;gap:40px;align-items:center;color:#536879;flex-wrap:nowrap;min-width:0}
.claim-counts p{margin:0;font-size:22px;font-weight:var(--fweight500);white-space:nowrap}
.claim-counts em{color:var(--c-blue);font-style:normal}
.claim-filters{display:flex;flex-direction:column;gap:6px;align-items:flex-start;flex-shrink:0}
.claim-filter-row{display:flex;gap:8px;align-items:center}
.claim-filter-sep{font-size:var(--hfsize4);color:var(--c-sub);flex-shrink:0}
.claim-filter-note{display:flex;align-items:center;gap:5px;margin:0;padding-left:4px;font-size:1.1rem;color:var(--color_black);opacity:0.5}
.claim-filter-note .nhlife_ico{--sizeFix:1.8rem;flex-shrink:0}
.claim-filter-btn{display:inline-flex;align-items:center;gap:0;background:#e6f0fb;border:0;border-radius:32px;padding:4px 16px;font-size:var(--hfsize4);color:var(--color_black);cursor:pointer;white-space:nowrap;line-height:1.6;transition:background .2s var(--ease)}
.claim-filter-date{min-width:148px;justify-content:center;padding:0 10px}
.claim-filter-date .nhlife_ico{--sizeFix:2.5rem}
.claim-filter-btn:hover,.claim-filter-btn:focus-visible{background:var(--c-blue-light)}

/* 빈 상태 */
.empty-state{display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;min-height:200px;width:100%}
.empty-state .nhlife_ico{--sizeFix:120px}
.empty-text{margin:0;font-size:var(--hfsize3);color:var(--color_black);white-space:nowrap}

/* ============================================================
도움 영역 (Figma 291:101)
============================================================ */
.sub-help{display:flex;flex-direction:column;gap:80px;width:100%}
.sub-section{display:flex;flex-direction:column;gap:32px;width:100%}

/* --- 어떤 보험이 필요하세요? (Figma 90:124) --------------------- */
.recommend-wrap{display:flex;gap:68px;align-items:stretch;width:100%}

.recommend-form-card{background:var(--color_white);width:585px;border-radius:32px;filter:drop-shadow(0 0 4px rgba(0,0,0,0.10));display:flex;gap:30px;align-items:stretch;padding:32px 40px;box-sizing:border-box;flex:0 0 624px}
.recommend-form-inner{display:flex;flex-direction:column;gap:16px;padding:0 0 0 20px;justify-content:center;flex:1}
.recommend-form-sub{margin:0;font-size:22px;color:#000c15;font-weight:var(--fweight500)}
.recommend-fields{display:flex;flex-direction:column;gap:16px}
.recommend-field{display:flex;gap:16px;align-items:center}
.recommend-label{font-weight:var(--fweight500);font-size:20px;color:#536879;white-space:nowrap;flex-shrink:0;width:4.5em}
.recommend-input{width:100% ! important;height:40px ! important;border-radius:30px;border:0  ! important;padding:2px 20px ! important;font-size:var(--hfsize3);background: #f0f2f8 ! important;}
.recommend-gender{display:flex;align-items:center;justify-content:space-between;border:0;padding:0;margin:0}
.recommend-gender-opt{display:flex;align-items:center;flex:0 0 auto;padding:0 30px 0 0;cursor:pointer;gap:10px}
.recommend-gender-opt:first-child{padding-left:0}
.recommend-gender-opt input[type="radio"]{appearance:none;width:40px;height:40px;border-radius:50%;background:#f0f2f8;border:0;padding:0;margin:0;cursor:pointer;flex-shrink:0}
.recommend-gender-opt input[type="radio"]:checked{background:var(--c-blue)}
.recommend-gender-opt span{font-size:18px;color:#536879;font-weight:var(--fweight500)}
.recommend-submit{background:var(--c-blue);border:none;border-radius:16px;padding:0 30px;color:var(--color_white);font-size:20px;font-weight:var(--fweight500);cursor:pointer;line-height:1.4;align-self:stretch;white-space:nowrap;transition:background .2s var(--ease)}
.recommend-submit:hover,.recommend-submit:focus-visible{background:var(--c-blue-deep)}

.recommend-products{display:flex;gap:32px;align-items:stretch;flex:1 1 588px;max-width:588px}  
.recommend-product-card{background:var(--color_white);border-radius:32px;box-shadow:0 0 8px 0 rgba(0,0,0,0.10);display:flex;flex-direction:column;align-items:flex-start;gap:15px;padding:32px;box-sizing:border-box;flex:0 0 calc(50% - 16px);min-width:0;color:inherit;transition:box-shadow .25s var(--ease)}
.recommend-product-card:nth-child(1){left:0}
.recommend-product-card:nth-child(2){right:0}
.recommend-product-card:hover,.recommend-product-card:focus-visible{box-shadow:0 8px 20px 0 rgba(0,0,0,0.18);color:inherit}
.rp-title{margin:0;font-weight:var(--fweight500);font-size:var(--hfsize4);color:var(--c-text);letter-spacing:-1.2px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%}
.rp-name{margin:0;font-size:var(--hfsize4);font-weight:var(--fweight500);color:#536876;letter-spacing:-1.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.rp-tag{display:inline-flex;align-items:center;justify-content:center;padding:5px 8px;border-radius:24px;background:var(--c-blue);color:var(--color_white);font-size:var(--fsize3);font-weight:var(--fweight400);white-space:nowrap;transition:background .2s var(--ease)}
.recommend-product-card:hover .rp-tag{background:var(--c-blue-deep)}

/* --- NH농협생명 소식 (Figma 90:75) ------------------------------ */
.sub-news-wrap{display:flex;gap:68px;align-items:stretch}  /* gap 24→68 (위 recommend-wrap과 동일) (2026-07-02) */
.sub-news-wrap .news-cards{display:flex;gap:32px;align-items:flex-start;flex-shrink:0}
.sub-news-wrap .news-cards .more-arrow::before{width:6px;height:6px;border-top:3px solid var(--color_gray24);border-right:3px solid var(--color_gray24);border-radius:2px;transform:rotate(45deg) translate(-1px, 1px);transition:border-color .2s var(--ease)}

.sub-news-wrap .ncard{box-sizing:border-box;width:296px}  /* 이 섹션 카드만 border-box 296 고정 → 2카드 합계 624로 위 form-card(624)와 폭 일치 (2026-07-02) */
.sub-news-banner{border-radius:32px;flex:0 0 588px;max-width:588px;margin-left:auto;filter:drop-shadow(0 0 4px rgba(0,0,0,0.15));overflow:hidden;position:relative}  /* 폭 588=recommend-products, margin-left:auto로 카드 0~2개 무관 우측 고정. aspect-ratio 제거 → align-items:stretch로 왼쪽 news-cards 높이에 맞춰 늘어남 (2026-07-02) */
.sub-news-banner > a{position:absolute;inset:0;display:block;height:210px;}  /* 앵커가 배너를 꽉 채워 클릭영역 유지 + 이미지 원본 높이가 행 높이를 밀어올리지 않도록 out-of-flow (2026-07-02) */
.sub-news-banner img{width:100%;height:100%;object-fit:cover;object-position:left;display:block}  /* 높이를 채우도록 cover, 넘치는 폭은 오른쪽에서 크롭(object-position:left) (2026-07-02) */

/* --- 무엇을 도와드릴까요? (Figma 159:101) ------------------------ */
.faq-content{display:flex;align-items:center;width:100%;gap:68px}  /* gap 24→68 (recommend-wrap/sub-news-wrap와 동일, help-icons 영역=1280-624-68=588) (2026-07-02) */
.faq-list{display:flex;flex-direction:column;gap:16px;width:624px;flex-shrink:0;list-style:none;margin:0;padding:0}
.faq-item{display:flex;gap:12px;align-items:center}
.faq-num{background:#aabed2;border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:var(--hfsize4);font-weight:var(--fweight500);color:var(--color_white);flex-shrink:0}
.faq-link{font-size:20px;font-weight:var(--fweight500);color:#000c15;flex:1;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.faq-link:hover{text-decoration:underline}
.faq-arrow{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.faq-arrow::before{content:'';display:block;width:10px;height:10px;border-top:2.5px solid #333;border-right:2.5px solid #333;transform:rotate(45deg) translate(-2px,1px);transition:border-color .2s var(--ease),border-width .2s var(--ease)}
.faq-item:hover .faq-arrow::before{border-color:var(--c-blue);border-width:5px}

.help-icons{display:flex;gap:24px;align-items:center;justify-content:flex-start;padding:0 9px;flex:1;min-width:0}  /* 좌측정렬 + gap 42→24: 아이템 174×3=522 + 간격 24×2=48 = 570 = 내부폭 → 오른쪽 안 잘리고 딱 맞음 (2026-07-02) */
.help-icon-item{display:flex;flex-direction:column;gap:10px;align-items:center;min-width:174px;text-align:center}
.help-icon-img{width:140px;height:140px;overflow:hidden;flex-shrink:0;transition:transform .2s var(--ease)}
.help-icon-img img{width:100%;height:100%;object-fit:cover}
.help-icon-label{font-size:var(--hfsize3);font-weight:var(--fweight500);color:var(--color_black);white-space:nowrap;display:block}
a.help-icon-item:hover .help-icon-img{transform:scale(1.08)}
a.help-icon-item:hover .help-icon-label{text-decoration:none}
/* ── sitemap layout ── */
.sitemap-layout{width:1280px;margin:0 auto;padding:48px 0 100px}
.sitemap-page-title{font-size:32px;font-weight:700;color:var(--c-text);margin:0 0 32px;font-family:inherit}
.sitemap-tabbar{display:flex;border-bottom:2px solid var(--c-blue);margin-bottom:0}
.sitemap-tab{padding:11px 18px;font-size:14px;font-weight:500;color:#444;background:#f5f6f8;border:1px solid #d0d4da;border-bottom:none;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s;font-family:inherit;flex:1;text-align:center;position:relative}
.sitemap-tab+.sitemap-tab{border-left:none}
.sitemap-tab:hover{background:#e8ecf5;color:var(--c-blue)}
.sitemap-tab.is-active{background:var(--c-blue);color:#fff;font-weight:700;border-color:var(--c-blue);z-index:1}
.sitemap-panels{border:1px solid #d0d4da;border-top:none;background:#fff;min-height:400px}
.sitemap-panel{display:none;padding:36px 40px 48px}
.sitemap-panel.is-active{display:block}
.spanel-title{font-size:20px;font-weight:700;color:var(--c-blue);margin:0 0 28px}
.spanel-title::after{content:' →'}
.spanel-grid{display:grid;grid-template-columns:repeat(5,1fr);row-gap:40px;column-gap:20px}
.spanel-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.spanel-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.spanel-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.scol-head{font-size:14px;font-weight:700;color:var(--c-text);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid #e0e0e0}
.scol-head a{color:inherit;text-decoration:none}
.scol-head a:hover{color:var(--c-blue)}
.scol-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.scol-list li a{font-size:13px;color:#555;text-decoration:none;line-height:1.5;display:block;transition:color .12s}
.scol-list li a:hover{color:var(--c-blue)}
.scol-list li a[target="_blank"],.scol-head-only[target="_blank"]{display:flex;align-items:center;justify-content:space-between}
.scol-list li a .nhlife_ico,.scol-head-only .nhlife_ico{--sizeFix:20px;flex-shrink:0;margin-left:6px}
.scol-head-only{font-size:14px;font-weight:700;color:var(--c-text);text-decoration:none;display:block;padding-bottom:8px;border-bottom:1px solid #e0e0e0;margin-bottom:10px}
.scol-head-only:hover{color:var(--c-blue)}