/* ─────────────────────────────────────────────────────────────
   woori-basic.css — 우리WON 금융 정보(FN) 글 전용 스타일

   원본: insights/최종스타일/우리은행/pc-basic.{html,css} (디자인 확정본)
   원본 파일명이 기존 pc-basic.css 와 겹쳐서 `woori-basic` 으로 이름을 바꿔 이식했다.

   - 모든 규칙은 `#woori-basic`(본문 최상위 <main>) 스코프. 임베드(safehomes.kr) 시
     다른 카테고리 글·호스트 페이지 스타일을 건드리지 않는다.
   - 참조 본문: insights/templates/insights/ex_template_woori.html (LLM 이 그대로 복제)
   - 아이콘/배경은 insights/static/insights/icons/woori-*.  (기존 아이콘과 파일명이
     겹쳐서 전부 `woori-` 접두어. 본문 <img src> 는 파일명만 쓰고 서버가 절대경로로 치환)
   - 원본에 없지만 서버가 항상 주입하는 요소(#source 의 button.source-more, li[hidden])와
     하단 CTA(#action) 는 디자인 톤(#3996f3)에 맞춰 이 파일에서 추가로 정의한다.
   ───────────────────────────────────────────────────────────── */

@font-face {
    font-family: "Pretendard";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2") format("woff2");
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: "Pretendard";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: "Pretendard";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2") format("woff2");
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Pretendard";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Pretendard";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Pretendard";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Pretendard";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Pretendard";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: "Pretendard";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2") format("woff2");
    font-weight: 900;
    font-display: swap;
}

#woori-basic {

    height: calc(100dvh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── 공통 리셋 (원본의 전역 `*` 을 #woori-basic 안으로 한정) ───────────── */
#woori-basic * {
    font-family: "Pretendard";
    font-weight: 400;
    color: #4f5556;
    line-height: 1.5;
    letter-spacing: -1px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 15px;
    word-break: keep-all;
}

/* 우리WON 앱 웹뷰(모바일 폭) 기준 디자인 — 넓은 데스크톱에서 한 줄이 과도하게
   길어지지 않도록 본문 폭만 제한한다(모바일 렌더는 원본과 100% 동일). */
#woori-basic {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
}

#woori-basic ul,
#woori-basic li {
    list-style: none;
}

#woori-basic a {
    text-decoration: none;
    display: inline;
}

#woori-basic .hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#woori-basic hr {
    border: none;
    border-top: 1px solid #e4e4e4;
}

/* ── 헤더 ─────────────────────────────────────────────────────── */
#woori-basic header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    padding: 40px 20px;
    height: 260px;
    position: relative;
    z-index: 1;
    background: url("icons/woori-bg.jpg") no-repeat center/cover;
}

#woori-basic header:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.5) 100%
    );
    z-index: -1;
}

#woori-basic header h1 {
    font-weight: 700;
    font-size: 28px;
    text-align: center;
    color: #fff;
    line-height: 1.3;
}

#woori-basic header .art-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

#woori-basic header .art-meta div {
    display: flex;
    align-items: center;
    gap: 4px;
}

#woori-basic header .art-meta div time,
#woori-basic header .art-meta div p {
    color: #fff;
}

#woori-basic header .art-meta div i img {
    height: 13px;
    width: auto;
}

#woori-basic header .art-meta .dot {
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 100%;
}

/* ── 본문 그리드 ──────────────────────────────────────────────── */
#woori-basic .grid-container {
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

#woori-basic .grid-container section {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

#woori-basic .grid-container section h2 {
    color: #1c242f;
    font-weight: 600;
    font-size: 19px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#woori-basic .grid-container section h2 i img {
    width: 18px;
    height: 18px;
}

#woori-basic .grid-container section .h3-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#woori-basic .grid-container section h3 {
    color: #3996f3;
    font-weight: 500;
    font-size: 17px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#woori-basic .grid-container section h3 span {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    background: #3996f3;
    color: #fff;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
}

#woori-basic .grid-container section .p-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#woori-basic .grid-container section p strong {
    background: #d6f6e9;
    color: #212428;
}

#woori-basic .grid-container section p em {
    color: #3996f3;
    font-style: initial;
    font-weight: 500;
}

#woori-basic .grid-container section blockquote {
    padding: 8px;
    font-weight: 500;
    color: #212428;
    background: linear-gradient(90deg, #3996f31a 0, #fff);
    border-left: 2px solid #3996f3;
}

#woori-basic .grid-container section figure img {
    max-width: 100%;
    height: auto;
}

#woori-basic .grid-container section ul.list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#woori-basic .grid-container section ul.list li {
    position: relative;
    padding-left: 10px;
    color: #212428;
}

#woori-basic .grid-container section ul.list li:before {
    content: "";
    display: block;
    width: 2px;
    height: 2px;
    border-radius: 100%;
    background-color: #212428;
    position: absolute;
    left: 0;
    top: 10px;
}

#woori-basic .grid-container section ul.check {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#woori-basic .grid-container section ul.check li {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e4e4e4;
    border-radius: 5px;
    padding: 10px 15px;
}

#woori-basic .grid-container section ul.check li i img {
    width: 11px;
    height: 8px;
}

/* ── 한 줄 답변 ───────────────────────────────────────────────── */
#woori-basic #answer {
    background: #f8f8f8;
    padding: 20px;
    border-radius: 5px;
}

/* ── 상황 대화 ────────────────────────────────────────────────── */
#woori-basic #chat .thread {
    padding: 15px;
    background: #dbe7f0;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#woori-basic #chat .thread .item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#woori-basic #chat .thread .item p {
    padding: 10px;
    font-size: 14px;
    border-radius: 10px;
    max-width: 250px;
}

/* 말풍선 방향 — 묻는 사람("나")이 오른쪽 파란 말풍선, 답해주는 쪽이 왼쪽 흰 말풍선.
   (메신저 관행대로 '내가 보낸 말'이 오른쪽. 원본 시안은 반대로 잡혀 있어 뒤집었다.)
   #chat 은 항상 질문 item → 답변 item 순서이므로 홀수=질문(오른쪽)·짝수=답변(왼쪽). */
#woori-basic #chat .thread .item:nth-child(odd) {
    align-items: flex-end;
}

#woori-basic #chat .thread .item:nth-child(odd) p {
    background: #3996f3;
    color: #fff;
}

#woori-basic #chat .thread .item:nth-child(even) p {
    background: #f4f8fb;
}

/* ── 하단 CTA (원본 디자인에는 없는 추가 블록 — 톤만 맞춤) ─────────── */
#woori-basic #action .cta-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 25px 20px;
    border-radius: 5px;
    background: linear-gradient(180deg, #ecf5fe 0%, #f8fbff 100%);
    border: 1px solid #d5e8fc;
}

#woori-basic #action .cta-section h3 {
    color: #1c242f;
    font-weight: 600;
    font-size: 17px;
    text-align: center;
    display: block;
}

#woori-basic #action .cta-section a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 24px;
    border-radius: 5px;
    background: #3996f3;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

#woori-basic #action .cta-section a.btn:hover {
    background: #1f81e3;
}

/* ── 이어지는 글 ──────────────────────────────────────────────── */
#woori-basic #related {
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #e4e4e4;
    gap: 0;
}

#woori-basic #related .top {
    padding: 15px;
    gap: 10px;
    background: #f8f8f8;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #e4e4e4;
}

#woori-basic #related .top p {
    font-size: 14px;
}

#woori-basic #related .bottom {
    padding: 20px 15px;
    gap: 20px;
    display: flex;
    flex-direction: column;
}

#woori-basic #related .bottom .list ol {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#woori-basic #related .bottom .list ol li a {
    display: flex;
    gap: 15px;
}

#woori-basic #related .bottom .list ol li a span {
    color: #666;
}

#woori-basic #related .bottom .list ol li a p {
    text-decoration: underline;
    text-underline-offset: 4px;
}

#woori-basic #related .bottom .list ol li.active a span {
    color: #3996f3;
}

#woori-basic #related .bottom .list ol li.active a p {
    color: #3996f3;
}

#woori-basic #related .bottom .art-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

#woori-basic #related .bottom .art-tags li span {
    background: #f1f3f5;
    color: #767678;
    font-size: 13px;
    padding: 0 10px;
    height: 24px;
    display: flex;
    align-items: center;
    border-radius: 20px;
}

#woori-basic #related .bottom .art-tags li span.blue {
    background: #ecf5fe;
    color: #3996f3;
}

/* ── 판단 근거 및 출처 ─────────────────────────────────────────── */
#woori-basic #source .source-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#woori-basic #source .source-list li {
    padding: 15px;
    border: 1px solid #e4e4e4;
    border-radius: 5px;
}

/* 4번째 항목부터는 서버 스크립트가 li[hidden] 으로 접는다 — flex 등으로 덮지 않도록 명시. */
#woori-basic #source .source-list li[hidden] {
    display: none;
}

#woori-basic #source .source-list li a {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#woori-basic #source .source-list li a cite {
    font-style: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: keep-all;
    overflow-wrap: break-word;
    color: #212428;
}

#woori-basic #source .source-list li a span {
    color: #3996f3;
    font-size: 13px;
}

/* 「출처 더보기」 버튼 — 서버(_normalize_source_news_list)가 항상 주입한다. */
#woori-basic #source .source-more {
    border: none;
    background: none;
    outline: none;
    display: inline-flex;
    width: fit-content;
    gap: 8px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 auto;
}

#woori-basic #source .source-more span {
    font-size: 14px;
    color: #4f5556;
}

#woori-basic #source .source-more i img {
    width: 12px;
    height: auto;
}