/* index.html 의 <style> + 상세 페이지 본문 규칙 — make_about.py 가 만듦, 여기서 고치지 말 것 */
/* 색 이름표 — 카드뉴스·FAQ 와 같은 팔레트(2026-10-21). 색을 바꿀 땐 여기만 */
  :root {
    --bg: #FBF7EE;        /* 바탕(크림) */
    --card: #FFFFFF;      /* 흰 상자 */
    --cardline: #EDE6D6;  /* 흰 상자 테두리 */
    --green: #41B763;     /* 강조 초록(메뉴·아이콘) */
    --lime: #C8F071;      /* 연두(버튼·강조) */
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: var(--bg);
    color: #1a1a1a;
    line-height: 1.7;
    overflow-x: hidden;
  }
  
  /* Header */
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: var(--bg);
    backdrop-filter: blur(20px);
    z-index: 1000;
    /* border-bottom: 1px solid #e8e8e8; */
  }
  
  .header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .logo {
    font-size: 1.25rem;
    font-weight: 500;
    color: #00000000;
    text-decoration: none;
    letter-spacing: -0.02em;
    background-image: url(https://www.hanmiu.cc/images/logotype/hanmi_logotype.svg);
    background-repeat: none;
    background-size: contain;
  }
  
  .hamburger {
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 0;
    transition: opacity 0.2s ease;
  }
  
  .hamburger:hover {
    opacity: 0.6;
  }
  
  .hamburger span {
    display: block;
    width: 20px;
    height: 1.5px;
    background-color: #000000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .hamburger.active span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  
  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  
  .hamburger.active span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }
  
  /* Navigation */
  .nav-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 360px;
    height: 100vh;
    background-color: #ffffff;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    overflow-y: auto;
    border-left: 1px solid #e8e8e8;
  }
  
  .nav-overlay.active {
    right: 0;
  }
  
  .nav-content {
    padding: 80px 40px 40px;
  }
  
  .nav-links {
    list-style: none;
  }
  
  .nav-links li {
    margin-bottom: 8px;
    border-bottom: 1px solid #f5f5f5;
  }

  .emoji {
    font-family: 'Noto Emoji';
  }

  .nav-links .emoji {
    color: var(--green);
  }
  
  .nav-links li:last-child {
    border-bottom: none;
  }
  
  .nav-links a {
    display: block;
    position: relative;
    font-size: 1rem;
    font-weight: 400;
    color: #000000;
    text-decoration: none;
    padding: 16px 56px 16px 0px;
    transition: all 0.2s ease;
    letter-spacing: -0.01em;
  }
  
  .nav-links a:hover {
    color: var(--green);
    padding-left: 8px;
  }

  .nav-links a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-image: var(--creature-url);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    pointer-events: none; /* 클릭 방해 X */
    opacity: 0.95;        /* 필요하면 조절 */
  }
  
  /* Main Content */
  main {
    margin-top: 60px;
  }
  
  section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 100px 40px;
  }
  
  /* Hero Section with Canvas */
  .hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding-bottom: 2rem;
    /* border-bottom: 1px solid #e8e8e8; */
    --gap: 22px;        /* 좌우 여백 */
    --thickness: 1px;   /* 선 두께 */
    --color: #dbdbdb;

    /* 선을 배경으로 한 번 그리기 */
    background: linear-gradient(var(--color), var(--color)) no-repeat;
    /* 선의 가로 길이 = 전체 - 좌우 여백*2, 세로 길이 = 두께 */
    background-size: calc(100% - (var(--gap) * 2)) var(--thickness);
    /* 좌표: 왼쪽에서 gap만큼, 아래쪽(바닥)에 붙임 */
    background-position: left var(--gap) bottom;
  }
  
  #c-hanmi {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /*
  .hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    text-align: center; 
  }
  */
  
  .hero h1 {
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: 0;
    letter-spacing: -0.02em;
  }
  
  /* Event Section */
  .event-section {
    background-color: var(--bg);
    --gap: 22px;        /* 좌우 여백 */
    --thickness: 1px;   /* 선 두께 */
    --color: #9b9b9b;

    /* 선을 배경으로 한 번 그리기 */
    background: linear-gradient(var(--color), var(--color)) no-repeat;
    /* 선의 가로 길이 = 전체 - 좌우 여백*2, 세로 길이 = 두께 */
    background-size: calc(100% - (var(--gap) * 2)) var(--thickness);
    /* 좌표: 왼쪽에서 gap만큼, 아래쪽(바닥)에 붙임 */
    background-position: left var(--gap) bottom;
  }
  
  .event-container {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .event-title {
    font-size: 2rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
  }
  
  .event-subtitle {
    font-size: 1rem;
    font-weight: 400;
    color: #000;
    text-align: center;
    margin-bottom: 50px;
  }
  
  .event-details {
    background-color: var(--card);
    padding: 40px;
    border: 1px solid var(--cardline);
    border-radius: 10px;
    margin-bottom: 40px;
  }
  
  .event-details p {
    margin-bottom: 20px;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.8;
  }
  
  .event-info {
    background-color: #fafafa;
    padding: 30px;
    margin: 30px 0px 5px 0px;
    border-left: 2px solid #000000;
  }
  
  .event-info p {
    margin-bottom: 12px;
    font-weight: 400;
  }
  
  .event-info p:last-child {
    margin-bottom: 0;
  }
  
  .apply-button {
    display: block;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    padding: 5px 20px;
    background: var(--lime);
    color: black;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s ease;
    border: 1px solid #000000;
    border-radius: 10px;
    letter-spacing: 0.02em;
  }
  
  .apply-button:hover {
    background: white;
    color: #000000;
  }

  /* 두 번째 버튼(덜 급한 것): 흰 바탕, 마우스를 올리면 연두 */
  .apply-button.secondary {
    background: var(--card);
  }

  .apply-button.secondary:hover {
    background: var(--lime);
  }
  
  /* Video Section */
  .video-section {
    background-color: var(--bg);
    --gap: 22px;        /* 좌우 여백 */
    --thickness: 1px;   /* 선 두께 */
    --color: #9b9b9b;

    /* 선을 배경으로 한 번 그리기 */
    background: linear-gradient(var(--color), var(--color)) no-repeat;
    /* 선의 가로 길이 = 전체 - 좌우 여백*2, 세로 길이 = 두께 */
    background-size: calc(100% - (var(--gap) * 2)) var(--thickness);
    /* 좌표: 왼쪽에서 gap만큼, 아래쪽(바닥)에 붙임 */
    background-position: left var(--gap) bottom;
  }
  
  .video-container {
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .video-title {
    font-size: 1.5rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: -0.02em;
  }
  
  .video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border: 1px solid var(--cardline);
    border-radius: 10px;
  }
  
  .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  /* Carousel Section */
  .carousel-section {
    /* display: none; */
    background-color: var(--bg);
    --gap: 22px;        /* 좌우 여백 */
    --thickness: 1px;   /* 선 두께 */
    --color: #9b9b9b;

    /* 선을 배경으로 한 번 그리기 */
    background: linear-gradient(var(--color), var(--color)) no-repeat;
    /* 선의 가로 길이 = 전체 - 좌우 여백*2, 세로 길이 = 두께 */
    background-size: calc(100% - (var(--gap) * 2)) var(--thickness);
    /* 좌표: 왼쪽에서 gap만큼, 아래쪽(바닥)에 붙임 */
    background-position: left var(--gap) bottom;
  }
  
  .carousel-title {
    font-size: 2rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 50px;
    letter-spacing: -0.02em;
  }
  
  .carousel-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .carousel-wrapper {
    overflow: hidden;
    border: 1px solid var(--cardline);
  }
  
  .carousel-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .carousel-slide {
    min-width: 100%;
    position: relative;
  }
  
  .carousel-slide img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  .carousel-slide .video-wrapper {
    border: none;
  }
  
  .carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
  }
  
  .indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #d8d8d8;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
  }
  
  .indicator.active {
    background-color: #000000;
  }
  
  .indicator:hover {
    background-color: #666666;
  }
  
  /* Creatures Section */
  .creatures-section {
    background-color: var(--bg);
  }
  
  .creatures-container {
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .creatures-title {
    font-size: 2rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 50px;
    letter-spacing: -0.02em;
  }
  
  .creatures-image {
    width: 100%;
    /* border: 1px solid #e8e8e8; */
    margin-bottom: 40px;
  }
  
  .creatures-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 40px;
  }
  
  .creatures-link {
    background-color: var(--card);
    padding: 40px 30px;
    text-align: center;
    text-decoration: none;
    color: #000000;
    transition: all 0.2s ease;
    border: 1px solid var(--cardline);
    border-radius: 10px;
  }
  
  .creatures-link:hover {
    background-color: #000000;
    color: #ffffff;
  }
  
  .creatures-link-title {
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
  }
  
  .creatures-link-desc {
    font-size: 0.9rem;
    font-weight: 400;
    color: inherit;
    opacity: 0.7;
  }
  
  /* Footer */
  footer {
    position: relative;
    overflow: hidden;
    background-color: #000000;
    color: #ffffff;
    padding: 80px 40px 50px;
  }
  
  .footer-container {
    max-width: 1400px;
    margin: 0 auto;
  }
  
  .footer-title {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 30px;
    letter-spacing: -0.02em;
  }
  
  .footer-info {
    margin-bottom: 12px;
    font-size: 0.95rem;
    font-weight: 300;
  }
  
  .footer-info a {
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    transition: border-color 0.2s ease;
  }
  
  .footer-info a:hover {
    border-bottom-color: rgba(255, 255, 255, 1);
  }

  /* 오른쪽 아래 '까꿍' 아이콘 컨테이너 */
  .footer-peeker {
    --size: 140px;    /* 아이콘 크기 */
    --reveal: 100px;   /* 보이게 남겨둘 폭(픽셀) */
    position: absolute;
    right: 0;
    bottom: 0;
    width: var(--size);
    height: var(--size);
    transform: rotate(20deg) translateX(100%); /* 처음엔 완전히 밖에 */
    transition: transform .55s cubic-bezier(0.2, 0.7, 0, 1);
    z-index: 1;
    pointer-events: none; /* 클릭 방해 X */
  }

  /* footer가 보일 때: 완전 진입이 아니라 일부만 '까꿍' */
  .footer-peeker.peeking {
    transform: rotate(0deg) translateX(calc(100% - var(--reveal)));
  }

  /* 실제 아이콘은 ::before로 그림 */
  .footer-peeker::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: var(--creature-url);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: invert(1);
  }

  /* 공통 소셜 컨테이너 */
  .social{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }
  .social--lg{ --icon-size:32px; }   /* 중간(32px) */
  .social--sm{ --icon-size:16px; }   /* 푸터(16px) */
  .social--center{ justify-content:center; }
  .social--left{ justify-content:flex-start; }  /* 푸터 왼쪽 정렬 */
  .social--mt{ margin-top:12px; }    /* "바로 위 인덱스"와 살짝 간격 */

  /* 아이콘 공통 */
  .social a.icon-link{
    display:inline-flex;
    width:var(--icon-size);
    height:var(--icon-size);
    color:inherit;        /* currentColor 사용 */
    line-height:0;
  }
  .social a.icon-link svg{ width:100%; height:100%; display:block; }
  .social a.icon-link:hover{ opacity:.85; }
  .social a.icon-link:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }

  /* Responsive */
  @media (max-width: 768px) {
    .header-container {
      padding: 0 20px;
    }
    
    section {
      padding: 60px 20px;
    }
    
    .hero h1 {
      font-size: 1.6rem;
    }
    
    .event-title,
    .video-title,
    .carousel-title,
    .creatures-title {
      font-size: 1.5rem;
    }
    
    .event-details {
      padding: 25px;
    }
    
    .creatures-links {
      grid-template-columns: 1fr;
    }
    
    .nav-overlay {
      max-width: 100%;
    }
    
    .nav-content {
      padding: 80px 20px 40px;
    }
  }
  
  @media (min-width: 1024px) {
    .hero h1 {
      font-size: 3rem;
    }
  }
  .emoji svg, svg.emo { width: 1em; height: 1em; vertical-align: -0.125em; fill: currentColor; }

  /* 자료를 읽는 길 */
  .guide-section .event-title { margin-bottom: 28px; }
  .guide-list { list-style: none; max-width: 560px; margin: 0 auto; padding: 0; text-align: center; word-break: keep-all; }
  .guide-list li { margin: 0 0 14px; line-height: 1.7; }
  .guide-list a { font-weight: 700; color: inherit; text-underline-offset: 4px; white-space: nowrap; }
  .guide-note { font-size: 0.85em; color: #666; white-space: nowrap; }
  .guide-more { max-width: 560px; margin: 26px auto 0; font-size: 0.95rem; line-height: 1.8; word-break: keep-all; text-align: left; }
  .guide-more summary { cursor: pointer; text-align: center; color: #555; }
  .guide-more p { margin: 14px 0 0; }
  .guide-more a { color: inherit; text-underline-offset: 3px; }
  .guide-more ul { margin: 8px 0 0; padding-left: 1.1em; }
  .guide-more li { margin: 8px 0 0; }
  @media (max-width: 480px) { .guide-list a { white-space: normal; } }

/* --- 상세 페이지(about/) 본문: 2024 글의 클래스를 메인 스타일로 --- */
.page-hero { flex-direction: column; padding: 70px 40px 50px; }
.page-hero h1 { font-family: 'Noto Serif KR', serif; }
.page-hero .page-desc { margin-top: 12px; font-size: 1rem; color: #555; word-break: keep-all; }
.article-section { padding-top: 60px; }
.article [id] { scroll-margin-top: 84px; }                     /* 고정 머리말(60px) 아래로 — /about/thought/#nuri-2019 등 */
.article { max-width: 760px; margin: 0 auto; font-size: 1.2rem; line-height: 1.9; word-break: keep-all; }
.article a { color: inherit; text-decoration: none; border-bottom: 1px solid #9b9b9b; transition: border-color 0.2s ease; }
.article a:hover { border-bottom-color: #000; }
.article a.no-underline { border-bottom: 0; }
.article img { max-width: 100%; height: auto; }
.article .full { display: block; width: 100%; margin: 0.75rem 0; border-radius: 10px; }
.article .subtle { font-size: 1rem; line-height: 1.85; color: #333; }
.article .quote { margin: 1rem 0; padding: 22px 26px; font-size: 0.95rem; line-height: 1.8; color: #444;
                  background-color: #fafafa; border-left: 2px solid #000; }
.article strong { font-weight: 600; background: linear-gradient(transparent 62%, #c8f071 62%); }
.article .note { color: #666; font-size: 0.9rem; }
.article ul { margin: 0.75rem 0 0.75rem 1.4em; }
.article li { margin-bottom: 0.75rem; }
.article li > .subtle { margin-top: 0.25rem; }
.article ul.leaf { list-style: url('/images/symbols/leaf01.svg'); }
.article ul.flower { list-style: url('/images/symbols/flower01.svg'); }
.article ul.musical { list-style: url('/images/symbols/musical_note_01.svg'); }
.article .bambini { font-family: 'Song Myung', serif; }
.article .iframe-container { position: relative; width: 100%; aspect-ratio: 16 / 9; height: auto; margin: 0.75rem 0;
                             overflow: hidden; border: 1px solid #e8e8e8; border-radius: 10px; }
.article .iframe-container .video { position: absolute; inset: 0; width: 100%; height: 100%; }
.article audio { display: block; width: 100%; margin: 0.5rem 0; }
#musical { display: block; margin: auto; width: 75%; cursor: pointer; image-rendering: pixelated; transition: opacity 1s; }
.nav-links a[aria-current="page"] { color: var(--green); }
/* 30주년 신문(/about/history/30th/) — 신문 꾸밈을 줄이고 글·사진 순서만 살림. 분홍 = 신문의 교사 기록·인용 색 */
.article .news-cover { margin: 0 auto 1rem; max-width: 420px; }
.article .news-cover img { display: block; width: 100%; height: auto; border: 1px solid var(--cardline); border-radius: 6px; }
.article .masthead { text-align: center; font-size: 0.9rem; color: #555; margin: 0; }
.article > .note { text-align: center; margin: 0.25rem 0 2rem; }
.article .news-toc { background: var(--card); border: 1px solid var(--cardline); border-radius: 10px; padding: 18px 24px; margin-bottom: 2.5rem; font-size: 1rem; }
.article .news-toc strong { background: none; }
.article .news-toc ol { margin: 0.5rem 0 0 1.4em; columns: 2; column-gap: 2rem; }
.article .news-toc li { margin-bottom: 0.3rem; }
.article h2 { font-family: 'Noto Serif KR', serif; font-size: 1.9rem; margin: 3.5rem 0 1rem; padding-top: 1rem; border-top: 3px solid #222; }
.article h3 { font-size: 1.35rem; margin: 2.5rem 0 0.75rem; }
.article h4 { font-size: 1.15rem; margin: 2rem 0 0.5rem; }
.article p { margin: 0 0 1rem; }
.article .lead { font-size: 1.05rem; color: #333; }
.article .sub { color: #d70564; font-weight: 600; margin-top: -0.4rem; }
.article .by, .article .sign { text-align: right; color: #555; font-size: 1rem; }
.article .q { font-weight: 700; margin-top: 2rem; }
.article .a b, .article .q b { color: var(--green); }
.article .news-dark { background: #3a3a3a; color: #fff; border-radius: 10px; padding: 20px 24px; margin: 1.25rem 0; font-size: 1rem; }
.article .news-dark p:last-child { margin-bottom: 0; }
.article .news-dark .src { text-align: right; color: #ddd; }
.article .news-dark .foot { color: #ddd; font-size: 0.9rem; }
.article .news-dark a { border-bottom-color: #aaa; }
.article blockquote { margin: 0; }
.article .pull { margin: 1.75rem 0; padding: 0 0 0 20px; border-left: 3px solid #d70564; color: #d70564; font-size: 1.05rem; }
.article .pull p { margin: 0; }
.article .pull cite { display: block; text-align: right; font-style: normal; font-size: 0.9rem; margin-top: 0.4rem; }
.article .record { color: #b0084f; font-size: 1rem; }
.article .news-box { border: 1.5px solid #e66a9f; border-radius: 12px; padding: 18px 22px; margin: 1.5rem 0; color: #b0084f; font-size: 1rem; }
.article .news-box strong { display: block; color: #d70564; font-size: 1.15rem; background: none; }
.article .news-box em { display: block; font-style: normal; margin: 0.2rem 0 0.6rem; color: #d70564; }
.article .news-box p:last-child { margin-bottom: 0; }
.article .news-box .src { text-align: right; }
.article .news-box.report { border-color: var(--cardline); background: var(--card); color: #333; }
.article .news-box.report strong { color: #222; }
.article .talk { list-style: none; margin: 1rem 0 1.5rem; padding: 14px 20px; background: var(--card); border: 1px solid var(--cardline); border-radius: 14px; font-size: 1rem; }
.article .talk li { margin: 0.2rem 0; }
.article .talk li::before { content: "“ "; color: var(--green); font-weight: 700; }
.article .voices { margin: 1rem 0 1.5rem; font-size: 0.98rem; }
.article .voices blockquote { background: var(--card); border: 1px solid var(--cardline); border-radius: 12px; padding: 12px 18px; margin: 0 0 0.6rem; color: #b0084f; }
.article .voices .src { text-align: right; font-size: 0.85rem; color: #666; }
.article .news-list { display: inline-block; vertical-align: top; width: calc(50% - 10px); margin: 0.5rem 0 1rem; padding: 16px 20px; box-sizing: border-box;
                      background: var(--card); border: 1px solid var(--cardline); border-radius: 12px; font-size: 0.98rem; }
.article .news-list + .news-list { margin-left: 16px; }
.article .news-list strong { display: inline-block; background: #222; color: #fff; border-radius: 999px; padding: 2px 14px; }
.article .news-list ul { margin: 0.6rem 0 0 1.2em; }
.article .news-list li { margin-bottom: 0.25rem; }
.article .news-fig { margin: 1.25rem 0 1.75rem; }
.article .news-fig .row { display: flex; gap: 6px; align-items: flex-start; }
.article .news-fig .cell { min-width: 0; }
.article .news-fig .cell img { display: block; width: 100%; height: auto; border-radius: 4px; background: #eee; }
.article .news-fig .cell span { display: block; font-size: 0.8rem; color: #666; margin-top: 0.25rem; line-height: 1.4; }
.article .news-fig .tall-cell { flex: 0 0 38%; margin: 0 auto; }
.article .news-fig .tall { max-height: 70vh; overflow-y: auto; border: 1px solid var(--cardline); border-radius: 4px; }
.article .news-fig figcaption { font-size: 0.85rem; color: #666; margin-top: 0.4rem; }
.article .news-cover.wide { max-width: 100%; }
.article .news-audio { margin: 1rem 0 1.5rem; padding: 14px 18px; background: var(--card); border: 1px solid var(--cardline); border-radius: 12px; }
.article .news-audio figcaption { font-size: 0.95rem; margin-bottom: 0.5rem; }
.article .news-audio audio { display: block; width: 100%; }
.article .news-video { margin: 1.25rem 0 1.75rem; }
/* 이야기(stories/) — 손그림 흐름 그림, 사진 더 보기, 목록 카드, 브로슈어 말풍선 */
.article .diagram-svg { margin: 1.5rem auto; max-width: 560px; }
.article .diagram-svg svg { display: block; width: 100%; height: auto; }
.article .diagram-svg a text { cursor: pointer; }
.article .diagram-svg figcaption { font-size: 0.85rem; color: #666; margin-top: 0.4rem; }
.article .readable { margin: 0.5rem 0 2rem; border: 1px solid var(--cardline); border-radius: 10px; background: var(--card); }
.article .readable summary { cursor: pointer; padding: 10px 16px; font-size: 0.95rem; }
.article .readable p { margin: 0.75rem 16px; font-size: 1rem; }
.article a.zoomable { display: block; border: 0; cursor: zoom-in; }
#zoom { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; overflow: auto; }
#zoom[open] { display: flex; align-items: center; justify-content: center; }
#zoom::backdrop { background: rgba(20, 18, 14, .9); }
#zoom img { width: 100%; max-width: 1400px; height: auto; }
@media (min-width: 900px) { #zoom img { width: auto; max-width: 94vw; max-height: 94vh; } }
#zoom .close { position: fixed; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: #1a1a1a; font-size: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.25); cursor: pointer; z-index: 2; }
.article .more-photos { margin: 0.5rem 0 2rem; border: 1px solid var(--cardline); border-radius: 10px; background: var(--card); }
.article .more-photos summary { cursor: pointer; padding: 10px 16px; font-size: 0.95rem; }
.article .more-photos .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; padding: 10px; }
.article .more-photos .cell img { display: block; width: 100%; height: auto; border-radius: 4px; }
.article .more-photos .cell span { display: block; font-size: 0.78rem; color: #666; line-height: 1.4; margin-top: 0.2rem; }
.article video { display: block; width: 100%; height: auto; border-radius: 6px; background: #000; }
.article .snow { text-align: center; }
.article .snow-art { margin: 1.5rem auto 2rem; }
.article .snow-art .stage { width: min(260px, 70vw); margin: 0 auto; }
.article .snow-art .stage { aspect-ratio: 1; }
.article .snow-art canvas { display: block; width: 100%; height: 100%; }
.article .snow-art button { margin-top: 0.7rem; padding: 7px 18px; border: 1px solid var(--cardline); border-radius: 999px; background: var(--card); font: inherit; font-size: 0.95rem; cursor: pointer; }
.article .snow-art figcaption { margin-top: 0.5rem; font-size: 0.85rem; color: #666; }
.article .snow-art.static .stage, .article .snow-art.static button { display: none; }
.article .snow p { margin: 0.6rem auto; max-width: 34em; }
.article .story-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.article .card-link { display: block; border: 1px solid var(--cardline); border-radius: 14px; overflow: hidden; background: var(--card); }
.article .card-link:hover { border-color: #999; }
.article .card-link img { display: block; width: 100%; height: auto; }
.article .card-link .meta { display: block; padding: 14px 18px 0; font-size: 0.85rem; color: #666; }
.article .card-link strong { display: block; padding: 2px 18px; font-size: 1.25rem; background: none; }
.article .card-link .line { display: block; padding: 0 18px 16px; font-size: 0.95rem; color: #444; }
.article .chat { margin-top: 0.8rem; }
.article .chat ol { list-style: none; margin: 0; padding: 0; }
.article .chat li, .article .chat summary { display: flex; align-items: flex-end; gap: 8px; margin: 10px 0; }
.article .chat li.r { flex-direction: row-reverse; }
.article .chat summary { cursor: pointer; list-style: none; }
.article .chat summary::-webkit-details-marker { display: none; }
.article .chat summary::after { content: "더 보기 ▾"; align-self: center; flex: none; margin-left: auto; padding-left: 6px; font-size: 0.85rem; color: #777; }
.article .chat[open] summary::after { content: "접기 ▴"; }
.article .chat .av { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.article .chat .bubble { display: block; position: relative; max-width: 78%; padding: 10px 14px; border-radius: 18px; background: #eceaea; font-size: 0.98rem; line-height: 1.5; }
.article .chat li.r .bubble { background: #fbeb4f; }
.article .chat.green li.r .bubble { background: #cfe5a8; }
.article .chat.blue li.r .bubble { background: #cfe7f6; }
.article .bloom-lead { margin: 0 0 2.2rem; }
.article .bloom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem 1.5rem; align-items: start; }
.article .bloom-play { margin: 0; padding: 0; max-width: none; }
.article .bloom-play.wide { grid-column: 1 / -1; }
.article .bloom-play h3 { margin: 0 0 0.4rem; font-size: 1.25rem; }
.article .bloom-play p { margin: 0 0 0.7rem; font-size: 1rem; line-height: 1.75; }
.article .bloom-play .yts { display: grid; gap: 0.8rem; }
.article .bloom-play.wide .yts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.article .bloom-play figure { margin: 0; }
.article .bloom-play figcaption { font-size: 0.82rem; color: #666; margin-top: 0.3rem; line-height: 1.4; }
.article .yt, .article .bloom-play iframe { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; overflow: hidden; background: #111; }
.article .yt img { display: block; width: 100%; height: 100%; object-fit: cover; }
.article .yt .play { position: absolute; left: 50%; top: 50%; width: 56px; height: 40px; margin: -20px 0 0 -28px; border-radius: 10px; background: rgba(0, 0, 0, .72); }
.article .yt .play::after { content: ""; position: absolute; left: 22px; top: 11px; border-left: 16px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.article .yt:hover .play { background: #e60000; }
.article .rec-by { margin: -0.4rem 0 1.5rem; color: #666; font-size: 0.95rem; }
.article .rec h3 { margin: 2rem 0 0.6rem; font-size: 1.2rem; }
.article .rec-list { list-style: none; margin: 1rem 0; padding: 0.9rem 1.1rem; background: var(--card); border: 1px solid var(--cardline); border-radius: 12px; }
.article .rec-list li { margin: 0.15rem 0; }
.article .rec-close { margin-top: 1.5rem; }
.article .song .readable { margin: 0.7rem 0 0; }
.article .song .readable p { margin: 0.2rem 16px 1rem; font-size: 1rem; line-height: 1.9; }
.article .rec p:not(.rec-close) strong { background: none; box-shadow: none; text-decoration: none; }
.article .chat .bubble p { margin: 0; }
.article .chat .react { position: absolute; top: -12px; right: -6px; width: 24px; height: 24px; border-radius: 50%; background: #f1efef; display: grid; place-items: center; font-size: 0.8rem; }
.article .chat li.r .react { right: auto; left: -6px; }
.article .chat-card { display: inline-block; font-weight: 700; }
.article .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.article .news-video figcaption { font-size: 0.85rem; color: #666; margin-top: 0.4rem; }
.article .news-fig.diagram { max-width: 520px; margin-left: auto; margin-right: auto; }
.article .back { margin-top: 3rem; }
.article .back + .back { margin-top: 0.5rem; }
.article .more { margin: 1.5rem 0 2.5rem; padding-top: 0.75rem; border-top: 1px dashed var(--cardline); font-size: 1rem; }
@media (max-width: 768px) {
  .article .news-toc ol { columns: 1; }
  .article h2 { font-size: 1.5rem; }
  .article .news-list { display: block; width: auto; }
  .article .news-list + .news-list { margin-left: 0; }
  .article .bloom, .article .bloom-play.wide .yts { grid-template-columns: minmax(0, 1fr); }
  .article .bloom-play figure.square .yt, .article .bloom-play figure.square iframe { aspect-ratio: 1; }
  .article .news-fig .row { flex-wrap: wrap; }
  .article .news-fig .cell { flex-basis: 40% !important; }
  .article .news-fig .cell:only-child:not(.tall-cell) { flex: 1 1 100% !important; }   /* 한 장짜리는 폭 전체(줄어들면 슬라이드 글자를 못 읽음) */
  .article .news-fig .tall-cell { flex-basis: 70% !important; }
}
@media (max-width: 768px) {
  .page-hero { padding: 50px 20px 36px; }
  .article-section { padding-top: 40px; }
  .article { font-size: 1.1rem; }
  .article .subtle { font-size: 0.95rem; }
}