@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

    :root { --blue:#4058a6; --blue-dark:#2f4285; --red:#ef5a5f; --yellow:#f6c85f; --ink:#242424; --muted:#777; --line:#e9e9e9; --soft:#f7f8fc; --cream:#fff9ed; }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { margin:0; color:var(--ink); background:#fff; font-family:"Pretendard","Malgun Gothic",sans-serif; line-height:1.7; }
    a { color:inherit; text-decoration:none; }
    img { display:block; max-width:100%; }
    .container { width:min(92%,1180px); margin:0 auto; }

    header { position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(10px); }
    .nav { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:25px; }
    .logo { color:var(--blue); font-size:20px; font-weight:900; white-space:nowrap; }
    .logo::before { content:"📚"; margin-right:8px; }
    .menu { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:24px; font-size:14px; font-weight:700; }
    .menu a { position:relative; padding:26px 0; }
    .menu a:hover { color:var(--blue); }
    .menu a::after { position:absolute; right:0; bottom:18px; left:0; height:2px; background:var(--blue); content:""; transform:scaleX(0); transition:.2s; }
    .menu a:hover::after { transform:scaleX(1); }

    /* 축제 정보 탭 */
    .festival-tabs { display:flex; align-items:center; gap:6px; }
    .festival-tab { padding:8px 13px; border:1px solid #d9dff3; border-radius:999px; background:#fff; color:#46537e; font-size:14px; font-weight:800; line-height:1.2; transition:.2s; }
    .festival-tab:hover, .festival-tab:focus-visible { border-color:var(--blue); color:var(--blue); outline:none; }
    .festival-tab.is-active { border-color:var(--blue); background:var(--blue); color:#fff; box-shadow:0 3px 8px rgba(64,88,166,.2); }
    .page-hero { padding:72px 0 56px; background:linear-gradient(135deg,#f8f9ff 0%,#fffdf7 62%,#fff4f1 100%); text-align:center; }
    .page-hero h1 { margin:0 0 8px; color:#252d4d; font-size:clamp(32px,5vw,48px); line-height:1.25; }
    .page-hero p { margin:0; color:#667; }
    .page-content { min-height:calc(100vh - 250px); }
    .page-content .section-title { margin-top:0; }

    /* 고정 SNS/도서관 버튼: 아이콘별 전용 fill/stroke로 충돌을 방지합니다. */
    .social-buttons { position:fixed; top:96px; right:20px; z-index:1100; display:flex; flex-direction:column; gap:10px; }
    .social-btn { width:44px; height:44px; display:grid; place-items:center; flex:0 0 44px; border-radius:50%; box-shadow:0 4px 12px rgba(0,0,0,.16); transition:transform .2s ease, filter .2s ease; }
    .social-btn:hover, .social-btn:focus-visible { filter:brightness(.95); outline:3px solid rgba(64,88,166,.28); outline-offset:3px; transform:translateY(-2px); }
    .social-btn svg { display:block; width:22px; height:22px; }
    .social-btn.kakao { background:#fee500; }
    .social-btn.kakao svg { width:23px; height:23px; fill:#3c1e1e; }
    .social-btn.instagram { background:#e4405f; }
    .social-btn.instagram svg { fill:none; stroke:#fff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
    .social-btn.instagram .instagram-dot { fill:#fff; stroke:none; }
    .social-btn.facebook { background:#1877f2; }
    .social-btn.facebook svg { width:23px; height:23px; fill:#fff; }
    .social-btn.library { background:#f17549; }
    .social-btn.library svg { width:23px; height:23px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

    .hero { position:relative; display:flex; align-items:center; min-height:610px; overflow:hidden; background:radial-gradient(circle at 12% 20%,#fff1b8 0 10%,transparent 11%),radial-gradient(circle at 90% 78%,#dce7ff 0 14%,transparent 15%),linear-gradient(135deg,#f8f9ff 0%,#fffdf7 62%,#fff4f1 100%); }
    .hero-content { position:relative; z-index:1; padding:70px 0; text-align:center; }
    .hero small, .hero large { display:block; color:var(--blue); font-size:13px; font-weight:800; letter-spacing:1.4px; }
    .hero h1 { margin:15px 0 24px; color:#252d4d; font-size:clamp(38px,6vw,58px); font-weight:900; letter-spacing:-2.5px; line-height:1.2; }
    .event-info { display:inline-flex; flex-direction:column; gap:5px; padding:17px 28px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 10px 30px rgba(45,55,90,.08); }
    .event-info strong { font-size:17px; }
    #countdown { display:inline-block; margin:22px 0 10px; padding:9px 22px; border:1px solid #dce2fa; border-radius:999px; background:#eef1ff; color:var(--blue); }
    .button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; margin:4px; padding:11px 24px; border-radius:8px; background:var(--blue); color:#fff; font-size:15px; font-weight:800; transition:.2s; }
    .button:hover { background:var(--blue-dark); transform:translateY(-2px); }
    .button.light { border:1px solid #cbd3ee; background:#fff; color:var(--blue); }
    section { padding:82px 0; }
    .section-title { margin-bottom:40px; text-align:center; }
    .section-title h2 { margin:0 0 8px; color:#20284a; font-size:34px; font-weight:900; letter-spacing:-1.5px; line-height:1.25; }
    .section-title h2::after { display:block; width:34px; height:4px; margin:14px auto 0; border-radius:10px; background:var(--yellow); content:""; }
    .section-title p { margin:0; color:var(--muted); font-size:15px; }
    .quick-menu { border-bottom:1px solid #f0f0f0; }
    .quick-grid, .program-grid { display:grid; gap:16px; }
    .quick-grid { grid-template-columns:repeat(4,1fr); gap:14px; }
    .quick-card { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:155px; padding:22px; border:1px solid var(--line); border-radius:12px; text-align:center; transition:.2s; }
    .quick-card:hover, .program-card:hover { border-color:#c9d1f1; box-shadow:0 10px 25px rgba(50,65,120,.08); transform:translateY(-4px); }
    .icon { font-size:34px; }
    .quick-card h3 { margin:7px 0 2px; color:#252d4d; font-size:21px; }
    .quick-card p, .program-card p { margin:0; color:#777; font-size:13px; }
    .event { background:var(--cream); }
    #booth-info { display:flex; align-items:flex-start; justify-content:center; gap:40px; margin:40px auto 20px; }
    .booth-info img { width:550px; height:700px; border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 25px rgba(40,50,70,.08); object-fit:cover; }
    .pdf-download { margin:50px 0 20px; text-align:center; }
    .about, #schedule { background:var(--soft); }
    .about-box { max-width:850px; margin:auto; padding:36px 42px; border:1px solid var(--line); border-radius:14px; background:#fff; text-align:center; }
    .about-box h3 { margin:0 0 15px; color:#303a66; font-size:27px; }
    .about-box p { margin:8px 0; color:#5f5f5f; }
    .program-grid { grid-template-columns:repeat(3,1fr); }
    .program-card { padding:27px; border:1px solid var(--line); border-radius:14px; transition:.2s; }
    .program-card .emoji { font-size:38px; }
    .program-card h3 { margin:10px 0 7px; color:#28315a; font-size:21px; }
    .program-card p { margin:0 0 10px; color:#686868; font-size:14px; }
    .program-card a { color:var(--blue); font-size:14px; font-weight:800; }

    .table-wrap { overflow-x:auto; }
    /* 타임테이블: 이전 요청의 장소별 7열·병합 구조 */
    .festival-table { width:100%; min-width:1000px; border-collapse:collapse; background:#fff; table-layout:fixed; text-align:center; }
    .festival-table th, .festival-table td { padding:14px 8px; border:1px solid #d9dce8; vertical-align:middle; word-break:keep-all; }
    .festival-table th { background:#eaf0ff; color:#303a66; font-weight:800; }
    .festival-table .time { color:var(--blue); font-weight:800; }
    .festival-table .zone-cell { background:#fffaf2; font-size:16px; }
    .festival-table .library-cell { background:#f7fbf5; }
    .festival-table .note-cell { color:#666; font-size:13px; }
    .festival-table .blank-cell { background:#fcfcfc; }
    .festival-table small { color:#666; }

    .special-event { background:#fffaf2; }
    .event-card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; max-width:1200px; margin:0 auto; }
    .event-card { overflow:hidden; border:1px solid #e5ddd5; border-radius:14px; background:#fff; box-shadow:0 4px 14px rgba(70,50,30,.08); transition:transform .3s ease, box-shadow .3s ease; }
    .event-card:hover { box-shadow:0 12px 28px rgba(70,50,30,.15); transform:translateY(-7px); }
    .event-image { height:250px; overflow:hidden; background:#f5f1eb; }
    .event-image img { width:100%; height:100%; cursor:zoom-in; object-fit:cover; transition:transform .4s ease; }
    .event-card:hover .event-image img { transform:scale(1.04); }
    .event-card-content { padding:20px 22px 22px; }
    .event-category { display:inline-block; margin-bottom:8px; padding:5px 10px; border-radius:20px; background:#fff0df; color:#a85f3c; font-size:12px; font-weight:700; }
    .event-card-content h3 { margin:5px 0 8px; color:#49352b; font-size:20px; letter-spacing:-.5px; }
    .event-card-content p { min-height:48px; margin:0 0 15px; color:#756b64; font-size:14px; }
    .event-date { padding-top:12px; border-top:1px solid #eee5dc; color:#8b7b70; font-size:13px; }
    .location-box { text-align:center; }
    .location-detail { color:#343c62; font-size:19px; font-weight:800; }
    .map { display:flex; align-items:center; justify-content:center; min-height:230px; margin-top:25px; padding:25px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(rgba(255,255,255,.82),rgba(255,255,255,.82)),repeating-linear-gradient(45deg,#eef1f7 0,#eef1f7 10px,#f8f9fc 10px,#f8f9fc 20px); }
    footer { padding:38px 0; background:#252b46; color:#fff; text-align:center; }
    footer h3, footer p { margin:4px 0; }
    .image-modal { position:fixed; z-index:2000; display:none; align-items:center; justify-content:center; width:100%; height:100%; padding:30px; background:rgba(0,0,0,.78); inset:0; }
    .image-modal img { width:auto; height:auto; max-width:90%; max-height:90vh; border-radius:8px; box-shadow:0 10px 40px rgba(0,0,0,.4); object-fit:contain; }
    .image-modal-close { position:absolute; top:20px; right:30px; color:#fff; font-size:42px; font-weight:300; line-height:1; cursor:pointer; }
    @media (max-width:768px) { .nav { min-height:62px; gap:10px; } .logo { font-size:16px; } .festival-tabs { max-width:65vw; overflow-x:auto; padding:4px 0; scrollbar-width:none; } .festival-tabs::-webkit-scrollbar { display:none; } .festival-tab { flex:0 0 auto; padding:7px 10px; font-size:12px; } .social-buttons { top:74px; right:12px; gap:7px; } .social-btn { width:38px; height:38px; flex-basis:38px; } .social-btn svg { transform:scale(.86); } .quick-grid, .program-grid, .event-card-grid { grid-template-columns:1fr; } .booth-info { flex-direction:column; } .booth-info img { width:100%; height:auto; } section { padding:60px 0; } .event-image { height:auto; } .event-image img { height:auto; object-fit:contain; } }

/* 공지사항 추가: 메뉴 6개와 홈 바로가기 5개를 화면 너비에 맞게 배치 */
.quick-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
@media (max-width:1100px) {
  .nav { flex-direction:column; align-items:flex-start; gap:10px; padding-top:14px; padding-bottom:14px; }
  .festival-tabs { flex-wrap:wrap; max-width:100%; overflow:visible; }
  .social-buttons { top:auto; bottom:16px; }
  .quick-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:768px) {
  .quick-grid { grid-template-columns:1fr; }
}
/* Storybook festival visual system */
:root { --blue:#536d66; --blue-dark:#344d48; --ink:#3f352f; --muted:#74675f; --line:#e9dcd0; --soft:#fff7ed; --cream:#fff8ee; --yellow:#e7a956; }
body { background:#fffaf3; word-break:keep-all; }
header { background:rgba(255,250,243,.94); }
.logo { color:#5c4438; }
.festival-tab { color:#624b3f; border-color:#e8d7c3; background:#fffaf4; }
.festival-tab.is-active { box-shadow:0 3px 8px rgba(80,60,40,.16); }
.hero { min-height:620px; background:#fff7eb url('festival-storybook.webp') center center/cover no-repeat; }
.hero-content { padding:74px 0; }
.hero small { color:#745341; font-size:12px; letter-spacing:.13em; }
.hero h1 { display:grid; gap:.13em; margin:16px auto 24px; color:#443329; font-size:clamp(31px,4.5vw,58px); line-height:1.17; letter-spacing:-.045em; text-shadow:0 1px 12px rgba(255,249,239,.9); }
.hero h1 span { display:block; white-space:nowrap; }
.event-info { max-width:100%; border-color:#e8d6c2; background:rgba(255,251,245,.9); }
.event-info strong { font-size:clamp(13px,1.4vw,17px); }
#countdown { border-color:#ead4b8; background:#fff7e9; color:#644335; }
.section-title h2 { color:#514036; }
.about, #schedule { background:#fff7ed; }
.page-hero { background:linear-gradient(rgba(255,249,239,.80),rgba(255,249,239,.88)),url('festival-storybook.webp') center 32%/cover no-repeat; border-bottom:1px solid #eadbc9; }
.page-hero h1 { color:#4d3b31; }
.page-hero p { color:#725d4e; }
.page-content { background:linear-gradient(160deg,#fff8ed 0%,#fffcf6 48%,#f5eee3 100%); }
.special-event.page-content { background:linear-gradient(160deg,#fff8ed 0%,#fffcf6 48%,#f5eee3 100%); }
.event-card { border-color:#e5d4c2; box-shadow:0 8px 24px rgba(79,54,40,.07); }
.event-card-content h3 { color:#563e34; }
.event-card-content p { color:#716159; }
.event-image-button { background:#fbf1e5; }
.image-placeholder { background:linear-gradient(145deg,#f4ecdf,#e9eee4); color:#5d4b40; }
.zoom-hint { color:#536d66; }
.location-box { max-width:1000px; margin:auto; padding:26px; border:1px solid #e9daca; border-radius:20px; background:rgba(255,253,249,.88); box-shadow:0 15px 32px rgba(83,54,37,.07); }
.location-detail { color:#503c32; font-size:clamp(16px,2vw,19px); }
#festival-map { margin-top:20px; background:#f4e9da; }
.about-box { border-color:#e8d8c7; box-shadow:0 16px 38px rgba(103,69,42,.06); }
.about-box h3 { color:#563f33; line-height:1.42; letter-spacing:-.035em; }
.about-box p { max-width:56ch; margin:10px auto; line-height:1.75; text-wrap:pretty; }
.quick-card { background:rgba(255,255,255,.78); border-color:#e9dccc; }
.quick-card h3 { color:#573f34; }
.festival-table th { background:#f5e6d7; color:#4a3d35; }
.festival-table .time { color:#6b4e3b; }
.table-wrap { border-radius:12px; scrollbar-color:#c9ab8b #fff9f2; }
section[id] { scroll-margin-top:100px; }
footer { background:#493a34; }
@media (max-width:768px) {
 .container { width:min(92%,620px); }
 .nav { align-items:center; }
 .logo { font-size:14px; white-space:normal; line-height:1.35; }
 .festival-tabs { justify-content:center; gap:5px; }
 .festival-tab { padding:7px 9px; font-size:11px; }
 .hero { min-height:580px; background-image:linear-gradient(rgba(255,249,239,.25),rgba(255,249,239,.25)),url('festival-storybook-mobile.webp'); background-position:center center; }
 .hero-content { padding:50px 0 62px; }
 .hero small { font-size:10px; line-height:1.5; }
 .hero h1 { font-size:clamp(23px,6.2vw,34px); letter-spacing:-.05em; }
 .event-info { width:100%; padding:13px 10px; gap:4px; }
 .event-info strong { font-size:12px; line-height:1.45; }
 #countdown { margin:13px auto 0; font-size:13px; }
 section { padding:48px 0; }
 .section-title { margin-bottom:26px; }
 .section-title h2 { font-size:26px; }
 .section-title p { font-size:13px; line-height:1.5; }
 .about-box { padding:25px 17px; text-align:center; }
 .about-box h3 { font-size:clamp(18px,5vw,23px); line-height:1.4; }
 .about-box p { font-size:14px; line-height:1.6; text-align:center; }
 .quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .quick-card { min-height:125px; padding:12px 8px; }
 .quick-card h3 { font-size:16px; }
 .quick-card p { font-size:12px; }
 .quick-card .icon { font-size:26px; }
 .festival-table { min-width:850px; font-size:13px; }
 .festival-table th, .festival-table td { padding:10px 5px; }
 .page-hero { padding:48px 0 38px; background-position:65% center; }
 .page-hero h1 { font-size:30px; }
 .location-box { padding:16px 12px; }
 #festival-map { height:340px!important; }
 footer { font-size:13px; }
}
@media (max-width:360px) { .hero h1 { font-size:22px; } .quick-grid { grid-template-columns:1fr 1fr; } }

/* Program and directions continue the illustrated festival backdrop. */
body.illustrated-page .page-hero {
  background:linear-gradient(rgba(255,249,239,.67),rgba(255,249,239,.83)),url('festival-storybook.webp') center 36%/cover no-repeat;
}
body.illustrated-page .page-content,
body.illustrated-page .special-event.page-content {
  background:linear-gradient(rgba(255,250,242,.83),rgba(255,250,242,.90)),url('festival-storybook.webp') center center/cover no-repeat;
}
@media (max-width:768px) {
  body.illustrated-page .page-hero,
  body.illustrated-page .page-content,
  body.illustrated-page .special-event.page-content {
    background-image:linear-gradient(rgba(255,249,239,.78),rgba(255,249,239,.89)),url('festival-storybook-mobile.webp');
    background-position:center center;
  }
}