@charset "utf-8";

/* ============================================================
 * 0. ROOT — color scheme & responsive root font-size
 * ============================================================ */
:root { color-scheme: only light; --text: #000; --white: #fff; --black: #000; --footer: #181818; --theme: #fdc921; --theme-font: #f0b700; --accent: #ee1010; --accent-font: #ee1010; --main-dim: 0, 0, 0; --res: min(5.2vw, 10vh, 100px); }
@media screen and (max-width: 1000px) { :root { --res: min(12.5vw, 100px); } }


/* ============================================================
 * 1. RESET — base typography & element defaults
 * ============================================================ */
* { text-rendering: optimizeLegibility; font-family: 'Noto Sans KR', sans-serif; font-style: normal; font-weight: normal; word-wrap: break-word; word-break: keep-all; -webkit-font-smoothing: antialiased; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; color: var(--text); font-size: var(--res); }
body { overflow-x: hidden; }
div, h1, h2, h3, p, span, strong, em, small { margin: 0; margin-block: 0; padding: 0; font-weight: inherit; font-style: inherit; color: inherit; }
img { border: 0; vertical-align: baseline; }
a, a:focus, a:active, a:hover { outline: none; box-shadow: none; color: inherit; text-decoration: none; cursor: pointer; }
img, video { display: block; width: 100%; height: auto; object-fit: cover; }
section { display: block; width: 100%; position: relative; height: auto; background-repeat: no-repeat; background-position: center; background-size: cover; overflow-x: hidden; }
p { word-wrap: break-word; word-break: keep-all; }
span { display: inline-block; }


/* ============================================================
 * 2. LAYOUT — container, content, bg, bi (logo)
 * ============================================================ */
.container { width: 100%; margin: 0 auto; height: auto; position: relative; }
.container > .aligner { width: auto; position: relative; vertical-align: middle; font-size: 0; line-height: 0; white-space: nowrap; }
section > .container { height: auto; min-height: 100%; display: table; table-layout: auto; }
section > .container > .aligner { display: table-cell; }
.content { display: block; position: relative; margin: 0 auto; height: auto; font-size: 0; line-height: 0; box-sizing: border-box; }
.bg { position: absolute; width: 100%; height: 100%; overflow: hidden; pointer-events: none; left: 0; top: 0; background-repeat: no-repeat; background-size: cover; background-position: center; }
.bi { position: absolute; }


/* ============================================================
 * 3. TYPOGRAPHY — dc, sec-tit, theme, t-box, quot, collab
 * ============================================================ */
.dc { line-height: 1.7; font-weight: 400; }
.sec-tit, strong { font-weight: 700; }
span.theme, strong.theme { color: var(--theme-font); }
.t-box { position: relative; z-index: 1; color: var(--white); width: fit-content; vertical-align: baseline; letter-spacing: inherit; font-weight: 700; }
.t-box:before { content: ""; display: block; position: absolute; left: -.1em; right: -.1em; height: 100%; z-index: -1; background-color: var(--black); pointer-events: none; }
.quot { font: inherit; letter-spacing: inherit; display: inline-block; margin-left: -.44em; }
.collab { display: inline-block; letter-spacing: -.04em; font-weight: 700; font-size: .26rem; line-height: 1; color: var(--white); background: var(--black); border-radius: 999px; padding: .14rem .28rem; }
.collab .cross { display: inline-block; vertical-align: top; position: relative; color: transparent; width: .4rem; height: .26rem; font-size: 0; line-height: 0; }
.collab .cross::before, .collab .cross::after { content: ""; display: block; position: absolute; background-color: var(--white); left: 50%; top: 50%; width: .2rem; height: .025rem; }
.collab .cross::before { transform: translate(-50%, -50%) rotate(-45deg); }
.collab .cross::after { transform: translate(-50%, -50%) rotate(45deg); }


/* ============================================================
 * 4. SECTION: sec-main (메인 비주얼 + 캠페인 슬로건)
 * ============================================================ */
.sec-main { min-height: 100vh; height: auto; }
.sec-main .bg { background-image: url(../images/dadaab-refugee-camp-hero-bg.webp); background-repeat: no-repeat; }
.sec-main .bg::before { content: ""; display: block; position: absolute; pointer-events: none; z-index: 0; }
.sec-main .container { height: 100vh; }
.sec-main .content { margin: 0 auto; max-width: 100%; }
.sec-main .container .bi { z-index: 10; }
.sec-main .sec-tit { font-weight: 600; padding-left: .14rem; padding-bottom: .52rem; letter-spacing: -.04em; }
.sec-main .sec-tit .t-box { font-weight: 700; letter-spacing: -.04em; padding-left: .14rem; margin-left: -.14rem; }
.sec-main .sec-tit .t-box:before { left: 0; right: -.2rem; }
.sec-main .dc { padding-left: .15rem; letter-spacing: -.04em; }


/* ============================================================
 * 5. MAIN BANNER (하단 풀너비 후원 바)
 * ============================================================ */
/* [보류] 기존 라운드 알약 플로팅 후원 버튼 — kakuma 동일 스타일로 교체
.main-banner { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); width: auto; max-width: calc(100% - 32px); z-index: 100001; display: block; pointer-events: none; }
.main-banner > .banner-button,
.hero-donate-btn { display: inline-flex; align-items: center; justify-content: center; color: #000; text-decoration: none; border-radius: 999px; letter-spacing: -.025em; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; }
.main-banner > .banner-button:hover,
.hero-donate-btn:hover { background: #efbd1b; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,0.32); }
.main-banner > .banner-button { pointer-events: auto; background: var(--theme); padding: 16px 36px; min-height: 56px; box-sizing: border-box; box-shadow: 0 18px 30px rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.3); }
.main-banner > .banner-button br { display: none; }
.banner-button span, .banner-button strong, .banner-button em { font-weight: 700; display: inline-block; vertical-align: middle; }
.banner-button .txt { display: none; }
.banner-button .t-box { font-weight: 700; padding: 0; color: #000; white-space: nowrap; }
.banner-button .t-box:before { display: none; }
*/
.main-banner { position: fixed; bottom: 0; width: 100%; overflow: hidden; max-width: 100vw; display: table; z-index: 10; }
.banner-button { width: 100%; position: relative; font-size: 0; line-height: 0; display: block; text-align: center; background: var(--theme); color: #000; }
.main-banner > .banner-button { display: table-cell; vertical-align: middle; }
.banner-button span, .banner-button strong, .banner-button em { font-weight: 800; letter-spacing: -.05em; display: inline-block; vertical-align: middle; }
.banner-button .t-box { font-weight: 600; }
.banner-button:hover { background: #ee1212; color: var(--white); }

/* ============================================================
 * 5-1. HERO DONATE BUTTON (Hero 우측 상단)
 * ============================================================ */
.hero-donate-btn { position: absolute; z-index: 20; display: inline-flex; align-items: center; justify-content: center; background: #FDC513; color: #000; padding: 12px 50px; font-size: 28px; font-weight: 500; text-decoration: none; border-radius: 999px; letter-spacing: -.025em; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; }
.hero-donate-btn:hover { background: #efbd1b; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,0.32); }

/* ============================================================
 * 5-2. FLOATING CTA (장민호 캐릭터 이미지 + 후원 카드)
 * ============================================================ */
.floating-cta { position: fixed; z-index: 100002; display: block; line-height: 0; text-decoration: none; box-sizing: border-box; transition: transform 200ms ease; }
.floating-cta:hover { transform: translateY(-3px); }
.floating-cta-card { display: block; position: relative; background: var(--theme); border-radius: 16px; box-shadow: 0 18px 36px rgba(0,0,0,0.28); box-sizing: border-box; }
.floating-cta-txt { display: block; color: #1a1a1a; font-weight: 500; letter-spacing: -.03em; white-space: nowrap; }
.floating-cta-btn { display: block; background: #1a1a1a; color: #fff; border-radius: 999px; font-weight: 700; text-align: center; letter-spacing: -.02em; white-space: nowrap; transition: background 200ms ease; }
.floating-cta-btn .arrow { font-style: normal; font-weight: 700; margin-left: 6px; }
.floating-cta:hover .floating-cta-btn { background: #000; }
.floating-cta-img { position: absolute; pointer-events: none; height: auto; z-index: 2; }


/* ============================================================
 * 6. SECTION: sec-video (캠페인 영상)
 * ============================================================ */
.sec-video { background: linear-gradient(161deg, #c4b29e 0%, #a78e79 100%); }
.content.for-vid { max-width: 100%; width: 12.8rem; margin: 0 auto; }
.sec-video .video_card_media{position:relative;overflow:hidden;aspect-ratio:16/9;background:#000;}
.sec-video .video_iframe,.sec-video .video_card_thumb{position:absolute;inset:0;width:100%;height:100%;}
.sec-video .video_iframe{border:0;z-index:1;display:none;}
.sec-video .video_card_thumb{display:block;object-fit:cover;z-index:0;transition:transform 400ms ease,opacity 200ms ease;}
.sec-video .video_play_btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:0;background:transparent;padding:0;cursor:pointer;z-index:2;transition:opacity 180ms ease;}
.sec-video .video_play_img,.sec-video .video_stop_img{width:100px;height:100px;display:block;}
.sec-video .video_play_img{transform:scale(1);transition:transform 300ms ease;}
.sec-video .video_stop_img{display:none;}
.sec-video .video_card_media:hover .video_card_thumb{transform:scale(1.02);}
.sec-video .video_card_media.is-playing .video_iframe{display:block;}
.sec-video .video_card_media.is-playing .video_card_thumb{opacity:0;visibility:hidden;pointer-events:none;}
.sec-video .video_card_media.is-playing .video_play_btn{opacity:0;pointer-events:none;}
.sec-video .video_card_media.is-playing:hover .video_play_btn{opacity:1;pointer-events:auto;}
.sec-video .video_card_media.is-playing:hover .video_play_img{display:none;}
.sec-video .video_card_media.is-playing:hover .video_stop_img{display:block;}


/* ============================================================
 * 7. SECTION: sec-story (난민캠프 4개 스토리)
 * ============================================================ */
.sec-story { overflow-x: hidden; }
.sec-story .bg { background: #bca490; }
.sec-story .bg > div { z-index: 1; position: relative; }
.sec-story .bg > div::before, .sec-story .bg > div::after { content: ""; display: block; position: absolute; pointer-events: none; }
.sec-story .bg > div::before { top: 0; height: 100%; background-repeat: no-repeat; }
.sec-story .bg .story-1::before { background-image: url(../images/story1-dadaab-refugee-camp-landscape-bg.webp); }
.sec-story .bg .story-2 { background-repeat: repeat-x; background-size: auto 100%; background-position: center; background-image: url(../images/story2-bg.jpg); }
.sec-story .bg .story-3::before { background-image: url(../images/story3-jangminho-dadaab-refugee-mother-baby-bg.webp); }
.sec-story .bg .story-4::before { background-image: url(../images/story4-jangminho-dadaab-refugee-boy-meeting-bg.webp); }
.sec-story .story-quote { background: #a78e79; }
.sec-story .story-2 .details { background: #fffcf6; }
.sec-story .container { table-layout: auto; }
.sec-story .content { z-index: 2; }
.sec-story .photograph { position: relative; }
.sec-story .photograph .pic { position: absolute; left: 50%; transform: translate3d(-50%, 0, 0); }
.sec-story .content .details { box-sizing: border-box; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: start; }
.sec-story .content p { font-weight: 400; letter-spacing: -.05em; }
.sec-story .content .tit { letter-spacing: -.025em; }


/* ============================================================
 * 8. SECTION: sec-typo (지금, 엄마의 마음으로 어필 섹션)
 * ============================================================ */
.sec-typo { background: var(--theme); color: var(--text); text-align: center; }
/* 글로벌 container/aligner(table-cell, white-space:nowrap, font-size:0) 오버라이드 */
.sec-typo > .container { display: block; }
.sec-typo > .container > .aligner { display: block; width: 100%; white-space: normal; font-size: inherit; line-height: inherit; }
.sec-typo .dc {font-weight: 500; font-size: .4rem; line-height: .7rem; letter-spacing: -.04em; }
.sec-typo .sec-tit { font-size: .72rem; line-height: 1.08rem; letter-spacing: -.04em; }
.sec-typo .sec-tit .t-box { font-weight: 700; }
.sec-typo .sec-tit .t-box:before { height: .96rem; top: .12em; left: -.15rem; right: -.15rem; }


/* ============================================================
 * 9. SECTION: sec-committee (IRC 90년 역사 소개)
 * ============================================================ */
.sec-committee { background-color: #dddddd; }
.sec-committee .content { padding: 1.35rem 0 1.45rem; }
.sec-committee .photo { background: var(--white); height: auto; }
.sec-committee .identity { font-weight: 700; letter-spacing: -.06em; }
.sec-committee .identity .t-box { margin-top: .14rem; font-weight: 700; letter-spacing: -.04em; font-size: .7rem; }
.sec-committee .identity .t-box .theme { font-weight: 900; }
.sec-committee .work { display: block; line-height: 1.5; letter-spacing: -.05em; font-weight: 400; }


/* ============================================================
 * 10. FOOTER
 * ============================================================ */
footer { background-color: var(--footer); color: var(--white); }
.footer-phrase { text-align: center; line-height: 1.58; font-weight: 500; }
.footer-info { line-height: 1.33; font-weight: 200; letter-spacing: -.01em; }
.footer-info > span { padding: .28em 0; }
.footer-bottom { display: flex; align-items: flex-start; }
.footer-logo { flex: none; }
.footer-logo img { width: 100%; height: auto; }
.footer-text { flex: 1; min-width: 0; }


/* ============================================================
 * 11. RESPONSIVE — Desktop (≥ 1001px)
 * ============================================================ */
@media screen and (min-width: 1001px) {
  /* utility */
  .narrow { display: none !important; }
  /* layout */
  .container { width: 15rem; max-width: calc(100% - .96rem); }
  .container.w-100s { width: 19.2rem; max-width: 100%; }
  .container .aligner { vertical-align: middle; }
  .content { width: 100%; }
  .bi { left: .35rem; top: .4rem; width: 1rem; }
  .t-box:before { top: .075em; }
  .narrow + .t-box { margin-left: .3em; }
  /* main banner — desktop: kakuma 동일 풀너비 바 */
  /* [보류] 기존 데스크탑 라운드 플로팅 스타일
  .main-banner { bottom: 32px; }
  .main-banner > .banner-button { padding: 18px 48px; min-height: 64px; }
  .banner-button .t-box { font-size: 22px; line-height: 1.2; padding: 0; }
  */
  .main-banner { height: 1.0rem; }
  .banner-button .txt { font-size: .54rem; line-height: .6rem; }
  .banner-button .t-box { font-size: .3rem; line-height: .4rem; padding: .1rem .26rem; }
  .banner-button .txt + .t-box { margin-left: .2rem; }
  /* floating CTA — desktop: main-banner 오른쪽 위 (모바일과 동일 사이즈) */
  .floating-cta { right: 32px; bottom: calc(1.0rem + 50px); width: 360px; }
  .floating-cta-card { padding: 12px 170px 12px 22px; border-radius: 14px; }
  .floating-cta-txt { font-size: 16px; line-height: 1.3; margin: 5px 0; }
  .floating-cta-btn { padding: 7px; font-size: 16px; font-weight: 700; line-height: 1.1; }
  .floating-cta-img { width: 110px; right: 10px; bottom: 0px; }
  /* hero donate button — desktop */
  .hero-donate-btn { right: 1.4rem; top: 0.4rem; padding: 14px 32px; font-size: 22px; line-height: 1; font-weight: 500; }
  /* sec-main */
  .sec-main .bg { background-position: 60% 60%; background-size: cover; }
  .sec-main .bg::before { width: 50vw; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(238, 227, 206, .9) 0%, rgba(238, 227, 206, 0) 100%); }
  .sec-main .aligner { padding-top: 1.4rem; padding-bottom: 1.4rem; vertical-align: middle; }
  .sec-main .content { width: 15rem; padding-left: .6rem; padding-right: .6rem; }
  .sec-main .sec-tit { padding-top: .4rem; padding-bottom: .24rem; font-size: .54rem; line-height: .8rem; }
  .sec-main .sec-tit .t-box { font-size: .8rem; line-height: 1.2rem; }
  .sec-main .sec-tit .t-box:before { height: 1.06rem; top: .12rem; }
  .sec-main .dc { font-size: .26rem; line-height: .42rem; padding-top: .3rem; }
  /* sec-video */
  .content.for-vid { padding: 1.3rem 0; }
  .content.for-vid .video_card_media { border-radius: .15rem; }
  /* sec-story */
  .sec-story .container { width: 15.86rem; }
  .sec-story .content { display: flex; align-items: stretch; }
  .sec-story .content > div { flex: 1; }
  .sec-story .tit { font-size: .42rem; line-height: .64rem; }
  .sec-story .dc { padding-top: .44rem; font-size: .26rem; line-height: .46rem; }
  .sec-story .bg > div::after { height: 100%; top: 0; }
  .sec-story .bg > div::before { background-size: auto 100%; background-position: center; }
  .sec-story .story-1 { flex-direction: row-reverse; height: 13.32rem; }
  .sec-story .bg .story-1 { background: rgba(217, 206, 193, 1); }
  .sec-story .bg .story-1::before { width: 14.12rem; right: 55%; margin-right: -1.32rem; }
  .sec-story .bg .story-1::after { left: calc(50% - 2rem); width: calc(50% + 1.32rem); background: linear-gradient(90deg, rgba(217, 206, 193, 0) 0%, rgba(217, 206, 193, 1) 2.3rem); }
  .sec-story .story-1 .details { padding-left: calc(50% + 1.88rem); }
  .sec-story .story-2 { height: 7.7rem; }
  .sec-story .story-2 .story-2-stack { width: 100%; display: flex; flex-direction: row-reverse; align-items: stretch; }
  .sec-story .story-2 .details, .sec-story .story-2 .photograph { margin: -1.34rem auto -1.15rem; }
  .sec-story .story-2 .details { width: 7.75rem; padding-left: .9rem; flex: none; }
  .sec-story .story-2 .photograph { flex: 1; overflow: hidden; }
  .sec-story .story-2 .photograph .pic { position: static; left: auto; transform: none; width: 8.62rem; height: 100%; display: flex; flex-direction: column; }
  .sec-story .story-2 .photograph .pic img { flex: 1 1 0; width: 100%; min-height: 0; object-fit: cover; object-position: center; }
  .sec-story .story-3 { flex-direction: row-reverse; height: 11.52rem; }
  .sec-story .bg .story-3 { background: rgba(228, 226, 225, 1); }
  .sec-story .bg .story-3::before { width: 14.12rem; right: 43%; margin-right: -1.32rem; background-size: 100% auto; }
  .sec-story .bg .story-3::after { left: calc(50% - 1rem); width: calc(50% + 1.32rem); background: linear-gradient(90deg, rgba(217, 206, 193, 0) 0%, rgba(228, 226, 225, 1) 2.3rem); }
  .sec-story .story-3 .details { padding-top: 1.12rem; padding-left: calc(50% + 1.88rem); }
  .sec-story .story-quote { height: 6.5rem; }
  .sec-story .story-4 { height: 10.96rem; }
  .sec-story .bg .story-4 { background: rgba(217, 206, 193, 1); }
  .sec-story .bg .story-4::before { width: 100%; left: 20%; }
  .sec-story .bg .story-4::after { left: 0; width: calc(50% + 1.32rem); background: linear-gradient(270deg, rgba(217, 206, 193, 0) 0%, rgb(218 207 194) 2.3rem); }
  .sec-story .story-4 .details { padding-left: 0; }
  /* sec-typo (kakuma 동일) */
  .sec-typo { padding: 1rem 0 1.2rem; }
  .sec-typo .sec-tit { padding-top: .54rem; }
  /* sec-committee */
  .sec-committee .content { display: flex; }
  .sec-committee .photo { flex: none; width: 6.08rem; padding: .12rem; margin: 0 .45rem; }
  .sec-committee .info { flex: 1; padding: .6rem 0 0 .15rem; }
  .sec-committee .identity { padding: 0 .1rem; font-size: .38rem; line-height: 1.37; }
  .sec-committee .identity .t-box { padding: 0 .08rem; }
  .sec-committee .emblem { display: block; width: 1.7rem; }
  .sec-committee .emblem + .identity { padding-top: .62rem; padding-bottom: .62rem; padding-left: 0; font-size: .3rem; line-height: 1.25; }
  .sec-committee .emblem + .identity .t-box { font-size: .66rem; }
  .sec-committee .work { font-size: .24rem; line-height: 1.5; }
  /* footer */
  footer { padding: 1.1rem 0 2rem; }
  .footer-phrase { font-size: .3rem; letter-spacing: -.01em; padding-bottom: .8rem; }
  .footer-bottom { max-width: 16rem; margin: 0 auto; padding: 0 .6rem; box-sizing: border-box; }
  .footer-logo { width: .9rem; }
  .footer-info { text-align: center; font-size: .18rem; }
  .footer-info > span { display: inline-block; vertical-align: baseline; }
  .footer-info > .divider { display: inline-block; vertical-align: baseline; width: 1.7em; color: #6f6f6f; top: -.01rem; }
}


/* ============================================================
 * 12. RESPONSIVE — Mobile (≤ 1000px)
 * ============================================================ */
@media screen and (max-width: 1000px) {
  /* utility */
  .wide { display: none !important; }
  /* layout */
  .container { width: 100%; }
  .container .aligner { vertical-align: bottom; }
  .content { width: 100%; }
  .bi { width: 1rem; left: .3rem; top: .3rem; }
  .t-box:before { top: .05em; }
  .wide + .t-box { margin-left: .3em; }
  /* main banner — mobile: kakuma 동일 풀너비 바 */
  /* [보류] 기존 모바일 라운드 플로팅 스타일
  .main-banner { bottom: 20px; }
  .main-banner > .banner-button { width: 210px; min-height: 56px; padding: 14px 28px; }
  .main-banner > .banner-button .t-box { font-size: 16px; line-height: 1; letter-spacing: 0; white-space: nowrap; }
  */
  .banner-button .txt { font-size: .34rem; line-height: .44rem; letter-spacing: -.06em; }
  .banner-button .t-box { font-size: .36rem; line-height: .44rem; letter-spacing: -.025em; margin-top: .08rem; padding: .05rem .1rem; }
  /* mobile: main-banner 숨기고 floating CTA만 하단에 노출 */
  .main-banner { display: none !important; }
  .floating-cta { left: 50%; bottom: 12px; transform: translateX(-50%); width: calc(100% - 16px); max-width: 540px; }
  .floating-cta:hover { transform: translateX(-50%) translateY(-3px); }
  .floating-cta-card { padding: 12px 170px 12px 22px; border-radius: 14px; }
  .floating-cta-txt { font-size: 16px; line-height: 1.3; margin: 5px 0; }
  .floating-cta-btn { padding: 7px; font-size: 16px; font-weight: 700; line-height: 1.1; }
  .floating-cta-img { width: 110px; right: 10px; bottom: 0px; }
  /* hero donate button — mobile */
  .hero-donate-btn { right: .3rem; top: .7rem; padding: 11px 24px; font-size: 18px; line-height: 1; }
  /* sec-main */
  .sec-main .bg { background-position: 80% -10%; background-size: auto 10.44rem; }
  .sec-main .bg::before { width: 100%; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, rgba(238, 227, 206, 0) 4.5rem, rgba(238, 227, 206, 1) 8rem); }
  .sec-main .aligner { padding-top: 6.8rem; vertical-align: bottom; }
  .sec-main .container { min-height: 16rem; }
  .sec-main .content { width: 100%; padding: .7rem; }
  .sec-main .sec-tit { font-size: .52rem; line-height: .76rem; padding-top: .16rem; padding-bottom: .12rem; }
  .sec-main .sec-tit .t-box { font-size: .78rem; line-height: 1.15rem; }
  .sec-main .sec-tit .t-box:before { height: 1.02rem; top: .1rem; left: 0; }
  .sec-main .sec-tit .t-box:last-child { margin-bottom: .1rem; }
  .sec-main .dc { padding-top: .44rem; font-size: .32rem; line-height: .54rem; }
  /* sec-video */
  .content.for-vid { padding: 1.8rem 0 2.25rem; }
  /* sec-story */
  .sec-story .tit { font-size: .54rem; line-height: .76rem; }
  .sec-story .dc { padding-top: .54rem; font-size: .32rem; line-height: .54rem; }
  /* PC 기준 강제 줄바꿈 비활성화 (모바일에서는 자연 wrap, .narrow는 유지) */
  .sec-story .dc br:not(.narrow) { display: none; }
  .sec-story .bg > div::before, .sec-story .bg > div::after { width: 100%; left: 0; }
  .sec-story .details { padding: .7rem; }
  .sec-story .story-1 { height: 21rem; box-sizing: border-box; padding-top: 7.56rem; }
  .sec-story .bg .story-1::before { background-position: 100% 0; background-size: auto 7.76rem; }
  .sec-story .bg .story-1::after { top: 5rem; bottom: 0; background: linear-gradient(180deg, rgba(238, 228, 219, 0) 0%, rgba(238, 228, 219, 1) 2.5rem); }
  .sec-story .story-2 { height: 17.5rem; }
  .sec-story .story-2 .story-2-stack { width: 100%; margin: 0; display: block; }
  .sec-story .story-2 .details { margin: 0 auto -1.36rem;  width: calc(100% - 1rem); max-width: 7rem; background: #fffcf6; box-sizing: border-box; }
  .sec-story .story-2 .photograph { width: calc(100% - 1rem); max-width: 7rem; margin: -1.36rem auto 0; height: 8.24rem; overflow: hidden; }
  .sec-story .story-2 .photograph .pic { position: absolute; left: 50%; transform: translate3d(-50%, 0, 0); width: 100%; height: 100%; display: flex; flex-direction: column; }
  .sec-story .story-2 .photograph .pic img { display: block; width: 100%; height: 50%; flex: 1 1 0; object-fit: cover; object-position: center; }
  .sec-story .story-2 .details .tit { letter-spacing: -.075em; }
  .sec-story .story-3 { height: 22rem; box-sizing: border-box; padding-top: 10.3rem; }
  .sec-story .bg .story-3::before { background-position: center top; background-size: 100% auto; }
  .sec-story .bg .story-3::after { top: 7.5rem; bottom: 0; background: linear-gradient(180deg, rgba(217, 206, 193, 0) 0%, rgba(217, 206, 193, 1) 2.5rem); }
  .sec-story .story-quote { height: 7rem; }
  .sec-story .story-quote .tit { font-size: .4rem; line-height: .6rem; }
  .sec-story .story-4 { height: 18rem; box-sizing: border-box; padding-top: 8.7rem; }
  .sec-story .bg .story-4::before { background-position: 50% 0; background-size: auto 8rem; }
  .sec-story .bg .story-4::after { top: 5.5rem; bottom: 0; background: linear-gradient(180deg, rgba(228, 217, 205, 0) 0%, rgba(228, 217, 205, 1) 2.5rem); }
  /* sec-typo (kakuma 동일) */
  .sec-typo { padding: 1.5rem 0; }
  .sec-typo .sec-tit { padding-top: .64rem; }
  /* sec-committee */
  .sec-committee .aligner { vertical-align: top; }
  .sec-committee .content { width: 100%; max-width: 8rem; }
  .sec-committee .content:after { content: ""; display: block; height: 0; clear: both; }
  .sec-committee .identity { font-size: .36rem; line-height: 1.45; padding: 0 .7rem; z-index: 2; }
  .sec-committee .identity .t-box { margin-left: .2em; }
  .sec-committee .identity .t-box:first-child { margin-top: .22rem; }
  .sec-committee .photo { position: absolute; left: .28rem; top: 5.4rem; width: 5.26rem; padding: .1rem; z-index: 0; }
  .sec-committee .emblem { position: absolute; left: 50%; margin-left: 2.08rem; bottom: 3.9rem; z-index: 0; width: 1.28rem; }
  .sec-committee .work { position: relative; float: right; font-size: .32rem; margin-top: 7.27rem; text-align: left; padding: .4rem .36rem; z-index: 2; background: var(--theme); }
  /* footer */
  footer { padding: .72rem 0 2.92rem; }
  footer .content { width: calc(100% - .6rem); }
  .footer-phrase { font-size: .35rem; letter-spacing: -.025em; padding: 1.15rem 0; border-bottom: .03rem solid var(--text); position: relative; }
  .footer-phrase:after { content: ""; display: block; position: absolute; left: 0; bottom: .01rem; height: .01rem; background: #777; width: 100%; }
  .footer-bottom { gap: .4rem; padding: .6rem .4rem 0; }
  .footer-logo { width: 1.2rem; }
  .footer-info { text-align: left; font-size: .28rem; padding: 0; }
  .footer-info > span { display: block; }
  .footer-info > .divider { display: none; }
  .footer-info.copyright { padding-top: .35rem; }
}


/* ============================================================
 * 13. RESPONSIVE — small mobile (≤ 768px) sec-story overrides
 * ============================================================ */
@media (max-width: 768px) {
  .sec-story .story-3 {height:23rem;}
  .sec-story .story-4 {height: 18rem;}
}


/* ============================================================
 * 14. about_section2 / news_section / FAQ_section (kakuma 이식)
 * ============================================================ */
.about_white{color:#FFFFFF;}

/* about_section2 */
.about_section2{background:linear-gradient(180deg,#F0EEEA 0%,#FDC513 55%,#FDC513 100%);padding:140px 0;}
.about_section2 .about_section2_inner{width:1400px;margin:0 auto;}
.about_section2 .about2_top{display:flex;align-items:flex-start;justify-content:space-between;gap:80px;}
.about_section2 .about2_copy{flex:1;min-width:0;max-width:720px;align-self:center;}
.about_section2 .about2_copy .about2_title{font-size:52px;line-height:1;}
.about_section2 .about2_copy .about2_hl{display:inline-block;background:#000000;color:#FDC513;font-weight:600;font-size:52px;line-height:1;padding:10px 18px 12px;margin-bottom:6px;}
.about_section2 .about2_copy .about2_desc{margin-top:18px;color:#000000;font-size:20px;line-height:1.75;font-weight:500;}
.about_section2 .about2_stats{flex:0 0 560px;display:grid;grid-template-columns:1fr 1fr;gap:52px 64px;padding-top:18px;}
.about_section2 .about2_stats .about2_stat{text-align:center;color:#3C3212;opacity:0;transform:translateY(30px);transition:opacity 600ms ease,transform 600ms ease;}
.about_section2 .about2_stats .about2_stat.is-visible{opacity:1;transform:translateY(0);}
.about_section2 .about2_stats .about2_stat .about2_stat_icon{display:block;width:120px;height:120px;margin:0 auto 14px;}
.about_section2 .about2_stats .about2_stat .about2_stat_num{font-size:54px;font-weight:600;}
.about_section2 .about2_stats .about2_stat .about2_stat_label{margin-top:8px;font-size:20px;font-weight:500;}
.about_section2 .about2_bottom{margin-top:70px;display:flex;gap:26px;}
.about_section2 .about2_card{flex:1;background:#3B2E07;padding:60px 30px;}
.about_section2 .about2_card .about2_card_title{color:#FFFFFF;text-align:center;font-size:28px;font-weight:600;margin:0 0 22px;}
.about_section2 .about2_card .about2_card_body{display:flex;align-items:center;justify-content:center;}
.about_section2 .about2_card .about2_graph{display:block;max-width:100%;height:auto;opacity:0;transform:translateY(30px);transition:opacity 600ms ease,transform 600ms ease;}
.about_section2 .about2_card .about2_graph.is-visible{opacity:1;transform:translateY(0);}

@media (max-width:1400px){
    .about_section2{padding:96px 0;}
    .about_section2 .about_section2_inner{width:100%;padding:0 24px;box-sizing:border-box;}
    .about_section2 .about2_top{flex-direction:column;gap:34px;}
    .about_section2 .about2_copy{max-width:100%;align-self:flex-start;}
    .about_section2 .about2_copy .about2_title{font-size:40px;}
    .about_section2 .about2_copy .about2_hl{font-size:40px;}
    .about_section2 .about2_copy .about2_desc{font-size:20px;}
    .about_section2 .about2_stats{width:100%;flex:0 0 auto;grid-template-columns:repeat(2, minmax(0,1fr));gap:28px 24px;}
    .about_section2 .about2_stats .about2_stat .about2_stat_icon{width:96px;height:96px;}
    .about_section2 .about2_stats .about2_stat .about2_stat_num{font-size:40px;}
    .about_section2 .about2_bottom{flex-direction:column;margin-top:44px;}
    .about_section2 .about2_card{padding:30px 20px 50px;}
}
@media (max-width:768px){
    .about_section2{padding:72px 0;}
    .about_section2 .about_section2_inner{padding:0 16px;}
    .about_section2 .about2_copy .about2_title{font-size:28px;}
    .about_section2 .about2_copy .about2_hl{font-size:28px;padding:8px 12px 10px;}
    .about_section2 .about2_stats{grid-template-columns:repeat(2, minmax(0,1fr));gap:18px 16px;}
    .about_section2 .about2_stats .about2_stat .about2_stat_icon{width:84px;height:84px;}
    .about_section2 .about2_stats .about2_stat .about2_stat_num{font-size:24px;}
    .about_section2 .about2_stats .about2_stat .about2_stat_label{font-size:16px;}
    .about_section2 .about2_bottom{gap:16px;}
    .about_section2 .about2_card .about2_card_title{font-size:24px;}
    .about_section2 .about2_copy .about2_desc{font-size:16px;}
}

/* news_section */
.news_section{background-color:#2b2b2b;background-image:url('../images/news_bg.png');background-repeat:no-repeat;background-position:center center;background-size:contain;position:relative;padding: 160px 0 140px;}
.news_section .news_section_inner{width:1400px;margin:0 auto;}
.news_section .news_title{text-align:center;color:#FFFFFF;font-size:52px;font-weight:600;margin:0 0 40px;}
.news_section .news_cards{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;}
.news_section .news_card{background:#FFFFFF;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,0.35);padding:32px 32px 0;transition:background 300ms ease;}
.news_section .news_card:hover{background:#FDC513;}
.news_section .news_card_img{display:block;width:100%;height:auto; border-radius: 8px;}
.news_section .news_card_body{padding: 24px 0 42px; display: flex; flex-direction: column; position: relative; min-height: 248px;}
.news_section .news_card_title{font-size:28px;font-weight:600;color:#000000;margin:6px 0 6px;transition:color 300ms ease;}
.news_section .news_card_note{font-size:14px;color:#777777;margin:0 0 10px;transition:color 300ms ease;}
.news_section .news_card_desc{font-size:20px;color:#333333;margin:0 0 32px;transition:color 300ms ease;}
.news_section .news_card_btn{background:#FDC513;color:#000000;border-radius:100px;padding:12px 36px;width: 90px;text-align: center;font-size:20px;font-weight:600;transition:transform 180ms ease,box-shadow 180ms ease,background 180ms ease,color 300ms ease; position: absolute; left: 0; bottom: 42px;}
.news_section .news_card:hover .news_card_btn{background:#FFFFFF;color:#000000;}
.news_section .news_card:hover .news_card_btn:hover{background:#F0F0F0;color:#000000;transform:translateY(-2px);box-shadow:0 4px 10px rgba(179, 179, 179, 0.32);}
@media (max-width:1920px){
    .news_section{background-size:cover;}
}
@media (max-width:1400px){
    .news_section{padding:110px 0 96px;}
    .news_section .news_section_inner{width:100%;padding:0 24px;box-sizing:border-box;}
    .news_section .news_title{font-size:40px;margin-bottom:24px;}
    .news_section .news_cards{grid-template-columns:repeat(2, minmax(0,1fr));}
    .news_section .news_card_title{font-size:24px;}
    .news_section .news_card_desc{font-size:20px;}
}
@media (max-width:768px){
    .news_section{padding:84px 0 72px;}
    .news_section .news_section_inner{padding:0 16px;}
    .news_section .news_title{font-size:28px;}
    .news_section .news_cards{grid-template-columns:1fr;}
    .news_section .news_card{padding:24px 24px 0;}
    .news_section .news_card_body{padding: 24px 0 32px; min-height: 200px;}
    .news_section .news_card_btn{bottom: 32px;}
    .news_section .news_card_media{aspect-ratio:4 / 3; overflow:hidden;}
    .news_section .news_card_img{width:100%;height:100%;object-fit:cover;}
    .news_section .news_card_desc{font-size:16px;}
}

/* FAQ_section */
.FAQ_section{background:#F6F5F3;padding:140px 0;font-size:18px;line-height:1.4;}
.FAQ_section .faq_inner{width:1400px;margin:0 auto;}
.FAQ_section .faq_title{text-align:center;color:#333333;font-size:48px;font-weight:600;margin:0 0 60px;}
.FAQ_section .faq_item{border-top:1px solid #c7c7c7;}
.FAQ_section .faq_item:last-child{border-bottom:1px solid #c7c7c7;}
.FAQ_section .faq_q{width:100%;display:flex;align-items:center;gap:10px;padding:24px 20px;background:transparent;border:0;cursor:pointer;text-align:left;}
.FAQ_section .faq_badge{font-weight:800;color:#FDC513;font-size:20px;}
.FAQ_section .faq_q_text{font-size:20px;font-weight:500;color:#333333;flex:1;}
.FAQ_section .faq_arrow{width:24px;height:24px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
.FAQ_section .faq_arrow_icon{display:block;width:24px;height:24px;}
.FAQ_section .faq_arrow_icon--close{display:none;}
.FAQ_section .faq_item.is_open .faq_arrow_icon--open{display:none;}
.FAQ_section .faq_item.is_open .faq_arrow_icon--close{display:block;}
.FAQ_section .faq_a{display:none;background:#FFFFFF;}
.FAQ_section .faq_a_box{padding:24px 20px;border-top:1px solid #c7c7c7;}
.FAQ_section .faq_a_row{display:flex;gap:10px;align-items:flex-start;}
.FAQ_section .faq_a_row .faq_badge{flex:0 0 28px;}
.FAQ_section .faq_a_text{color:#222222;font-size:18px;line-height:1.4;}
.FAQ_section .faq_link{display:inline-flex;align-items:center;gap:8px;margin-top:15px;margin-left:38px;color:#333333;font-size:18px;font-weight:500;border-bottom:1px solid #000000;padding-bottom:3px;}
.FAQ_section .faq_link_icon{width:16px;height:16px;display:inline-block;}

@media (max-width:1400px){
    .FAQ_section{padding:96px 0;}
    .FAQ_section .faq_inner{width:100%;padding:0 24px;box-sizing:border-box;}
    .FAQ_section .faq_title{font-size:40px;margin-bottom:24px;}
    .FAQ_section .faq_q_text{font-size:18px;}
}
@media (max-width:768px){
    .FAQ_section{padding:72px 0;}
    .FAQ_section .faq_inner{padding:0;}
    .FAQ_section .faq_title{font-size:28px;}
    .FAQ_section .faq_q{padding:18px 12px;}
    .FAQ_section .faq_q_text{font-size:16px;}
    .FAQ_section .faq_a_text{font-size:14px;}
    .FAQ_section .faq_link{font-size:14px;}
    .FAQ_section .faq_a_box{padding:18px 12px;}
}