/* Home design only. Shared journal/editor and dated legacy assets stay independent. */
.comic-page {
  --paper: #fffefa;
  --ink: #322e2b;
  --muted: #7e756e;
  --coral: #ed806c;
  --coral-dark: #a64736;
  --butter: #fff1b6;
  --line: #e8e1d6;
  --purple: #a64736;
  color: var(--ink);
  background: var(--paper);
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  line-height: 1.7;
}
.comic-page [hidden] { display: none !important; }
.comic-page .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.comic-page .site-header { width:min(1100px,calc(100% - 64px)); min-height:88px; border-bottom:1px solid var(--line); }
.comic-page .brand { font-size:17px; font-weight:800; color:var(--ink); }
.comic-page .brand small { color:var(--muted); font-weight:400; }
.comic-page .site-header nav { font-size:13px; }
.comic-page .site-header .nav-contact { color:var(--coral-dark); border-color:#efc7b9; background:#fff4e9; }
.comic-page a:focus-visible, .comic-page button:focus-visible, .comic-page select:focus-visible, .comic-page summary:focus-visible { outline:3px solid var(--coral-dark); outline-offset:5px; }
.comic-page .comic-home h1, .comic-page .comic-home h2, .comic-page .comic-home h3, .comic-page .comic-home h4, .comic-page .comic-home p, .comic-page .comic-home figure { margin:0; }
.comic-page .comic-home img { display:block; }
.comic-page .comic-home em { font-style:normal; }
.comic-page .comic-home .section-kicker { color:#a28870; font-size:10px; font-weight:700; letter-spacing:.2em; margin-bottom:15px; }
.comic-page .intro-section { padding:48px 24px 64px; background:linear-gradient(0deg,#fffefa55,#fffefa00 55%),linear-gradient(#acd7d129 1px,transparent 1px),linear-gradient(90deg,#acd7d129 1px,transparent 1px); background-size:auto,24px 24px,24px 24px; }
.comic-page .intro-inner { width:min(960px,100%); margin:auto; display:grid; grid-template-columns:1fr 380px; align-items:center; gap:80px; }
.comic-page .intro-copy { text-align:center; }
.comic-page .brand-banner { width:100%; max-width:400px; max-height:205px; object-fit:contain; margin:auto; mix-blend-mode:multiply; }
.comic-page .intro-tagline { font-size:31px; line-height:1.45; letter-spacing:-.06em; margin-top:18px !important; }
.comic-page .intro-tagline strong { font-weight:900; background:linear-gradient(transparent 65%,#ffe9a7 65%); }
.comic-page .intro-description { margin-top:18px !important; font-size:14px; color:#6e665f; }
.comic-page .comic-button { display:inline-flex; align-items:center; justify-content:center; gap:26px; min-height:48px; padding:11px 23px; border:1.5px solid var(--ink); border-radius:10px; background:var(--coral); color:#241f1a; box-shadow:3px 4px 0 var(--ink); font-size:14px; font-weight:800; transition:transform .18s,box-shadow .18s; }
.comic-page .comic-button:hover { transform:translate(1px,2px); box-shadow:2px 2px 0 var(--ink); }
.comic-page .intro-copy .comic-button { margin-top:26px; }
.comic-page .intro-location { margin-top:18px !important; color:var(--muted); font-size:11px; }
.comic-page .handwritten { font-family:"Malgun Gothic",sans-serif; letter-spacing:-.05em; font-weight:700; }
.comic-page .featured-wrap { position:relative; padding:28px 0 36px; }
.comic-page .featured-label { position:absolute; left:16px; top:-12px; z-index:2; font-size:17px; transform:rotate(-5deg); }
.comic-page .featured-label span { font-size:35px; display:inline-block; transform:rotate(15deg); margin-left:14px; }
.comic-page .comic-main-card.art-card { position:relative; inset:auto; width:100%; max-width:none; padding:19px 20px 15px; border:1.5px solid #443b33; border-radius:18px; background:#fff; box-shadow:7px 8px 0 #f1dfc8; transform:rotate(2deg); }
.comic-page .comic-main-card .card-label { display:block; margin:0 0 13px; text-align:center; font-size:9px; color:#9d816d; letter-spacing:.16em; }
.comic-page .comic-main-card #hero-card-media { width:100%; }
.comic-page .comic-main-card .hero-svg { width:100%; aspect-ratio:1; background:#fffaf4; border-radius:8px; overflow:hidden; }
.comic-page .comic-main-card .hero-svg img { width:100%; height:100%; object-fit:contain; }
.comic-page .comic-main-card .hero-short { width:100%; aspect-ratio:1; margin:0; border-radius:8px; overflow:hidden; }
.comic-page .comic-main-card .hero-short iframe { display:block; width:100%; height:100%; border:0; }
.comic-page .comic-main-card .hero-short-link { display:block; padding:7px; text-align:center; font-size:11px; color:var(--muted); }
.comic-page .comic-main-card .hero-card-nav { display:flex; align-items:center; justify-content:center; gap:16px; margin:13px 0 0; }
.comic-page .comic-main-card .hero-card-nav button { min-width:44px; min-height:44px; border:1px solid #ecd9c7; border-radius:50%; color:var(--ink); background:#fff7e9; font-size:24px; line-height:1; }
.comic-page .comic-main-card .hero-card-picker { min-height:44px; background:#fff4df; color:#715341; }
.comic-page .comic-main-card .hero-card-status { text-align:center; font-size:11px; color:#81766e; margin:9px 0 0; min-height:19px; }
.comic-page .paper-note { position:absolute; right:-18px; bottom:5px; padding:12px 18px; background:var(--butter); color:#514634; box-shadow:2px 4px 0 #c8b28d44; transform:rotate(-5deg); font-size:11px; line-height:1.8; pointer-events:none; }
.comic-page .comic-section { width:min(930px,calc(100% - 48px)); margin:0 auto; padding:76px 0; text-align:center; }
.comic-page .section-heading { text-align:center; }
.comic-page .comic-title { display:flex; align-items:center; justify-content:center; gap:12px; font-size:clamp(27px,3.8vw,42px); line-height:1.35; font-weight:900; letter-spacing:-.075em; color:var(--butter); -webkit-text-stroke:5px var(--coral); paint-order:stroke fill; text-shadow:2px 0 var(--coral),-2px 0 var(--coral),0 -2px var(--coral),0 3px var(--coral),2px 4px #efb29a; }
.comic-page .title-mark { display:inline-block; width:20px; height:20px; flex-shrink:0; border:5px solid var(--coral); border-radius:5px; box-shadow:2px 2px 0 #f7d3b0; transform:rotate(-5deg); }
.comic-page .section-intro { margin:20px 0 30px !important; font-size:15px; color:#6f6257; }
.comic-page .works-grid { width:min(690px,100%); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 auto 24px; }
.comic-page .work-card { min-width:0; position:relative; background:#fff; border:1px solid #eee4d7; border-radius:7px; overflow:hidden; text-align:left; transition:transform .2s,box-shadow .2s; }
.comic-page .work-card:hover { transform:translateY(-4px) rotate(-1deg); box-shadow:0 8px 18px #46382412; }
.comic-page .work-image { aspect-ratio:1; overflow:hidden; background:#f4f2e9; }
.comic-page .work-image img { width:100%; height:100%; object-fit:cover; }
.comic-page .work-image img.fallback-art { padding:24px; object-fit:contain; }
.comic-page .work-copy { padding:11px 12px; }
.comic-page .work-copy>span, .comic-page .work-copy>p { display:none; }
.comic-page .work-copy h3 { font-size:12px; font-weight:600; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.comic-page .gallery-preview { grid-column:1/-1; display:block; }
.comic-page .gallery-preview img { width:100%; max-height:580px; object-fit:contain; }
.comic-page .gallery-preview span { display:block; margin:12px 0; font-size:13px; }
.comic-page .text-link { display:inline-block; font-size:13px; padding:8px 0; border-bottom:1px solid #b69b83; color:#705b47; }
.comic-page .load-message { font-size:12px; color:var(--muted); margin:16px auto !important; }
.comic-page .welcome-section { border-top:1px dashed #dfcdbb; }
.comic-page .welcome-comic { display:grid; grid-template-columns:1fr 64px 1fr; align-items:center; gap:14px; max-width:760px; margin:44px auto 24px; }
.comic-page .comic-panel { min-width:0; }
.comic-page .comic-panel img { width:100%; height:265px; object-fit:contain; mix-blend-mode:multiply; }
.comic-page .comic-panel figcaption { font-size:17px; line-height:1.6; margin-top:16px; }
.comic-page .comic-panel figcaption small { display:block; font-size:12px; color:var(--muted); margin-top:8px; }
.comic-page .comic-arrow { font-size:52px; transform:rotate(-16deg); color:var(--coral); }
.comic-page .welcome-note { font-size:14px; color:#827567; line-height:1.8; }
.comic-page .mobile-break { display:none; }
.comic-page .comic-subtitle { margin:70px 0 32px !important; color:var(--coral-dark); font-size:27px; letter-spacing:-.05em; font-weight:900; }
.comic-page .interests-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; text-align:center; }
.comic-page .interest-card { position:relative; padding:25px 15px; background:#fff; border:1px solid #eadfce; border-radius:14px; }
.comic-page .interest-card:nth-child(2) { transform:translateY(15px); background:#fffdf3; }
.comic-page .mini-number { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#ffe3d4; color:#975442; font-size:10px; font-weight:800; margin-bottom:15px; }
.comic-page .interest-card h4 { min-height:52px; font-size:15px; line-height:1.7; letter-spacing:-.05em; }
.comic-page .interest-card h4 em { background:linear-gradient(transparent 65%,#ffe9a7 65%); }
.comic-page .interest-card img { width:100%; max-width:100%; height:auto; max-height:none; object-fit:contain; margin:16px auto; mix-blend-mode:multiply; }
.comic-page .interest-card p { font-size:12px; color:var(--muted); }
.comic-page .welcome-sign { width:200px; margin:65px auto 0; }
.comic-page .welcome-sign img { width:100%; height:190px; object-fit:contain; mix-blend-mode:multiply; }
.comic-page .welcome-sign span { display:block; font-size:17px; transform:rotate(-5deg); margin-top:10px; }
.comic-page .schedule-section { border-top:1px dashed #dfcdbb; }
.comic-page .week-range { display:inline-block; font-size:12px; color:#8c7b6c; padding:6px 14px; border:1px solid #eee0cb; border-radius:20px; margin-bottom:26px; }
.comic-page .schedule-card { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center; gap:36px; padding:25px; text-align:left; border:1px solid #e7d7c2; border-radius:18px; background:#fff; box-shadow:6px 7px 0 #f5e9d7; }
.comic-page .schedule-symbol { display:block; min-width:0; border-radius:10px; overflow:hidden; background:#fff8ec; }
.comic-page .schedule-symbol img { display:block; width:100%; height:auto; max-height:620px; object-fit:contain; }
.comic-page .waiting-art { min-height:330px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; color:#a36542; background:linear-gradient(#e8cfaa33 1px,transparent 1px),linear-gradient(90deg,#e8cfaa33 1px,transparent 1px); background-size:20px 20px; text-align:center; }
.comic-page .waiting-art>strong { font:900 62px/1.1 system-ui,sans-serif; color:var(--coral); }
.comic-page .waiting-art>strong span { display:block; font-size:27px; color:#69513c; margin-top:10px; }
.comic-page .waiting-art>span:last-child { font-size:12px; }
.comic-page .status-label { display:inline-block; padding:5px 12px; border-radius:20px; color:#a35035; background:#ffeddd; font-size:11px; font-weight:700; }
.comic-page .schedule-copy h3 { font-size:18px; font-weight:800; line-height:1.7; margin:17px 0 12px; }
.comic-page #schedule-detail { font-size:17px; line-height:1.7; }
.comic-page .weekly-topic-link { font-size:23px; font-weight:800; letter-spacing:-.06em; color:#38302a; text-decoration:underline; text-decoration-color:#e9b69a; text-underline-offset:6px; }
.comic-page .session-summary { margin-top:16px !important; font-size:13px; color:#736759; white-space:pre-line; }
.comic-page .session-date { margin-top:15px !important; font-size:13px; font-weight:700; color:#8f6045; }
.comic-page .schedule-basics { margin:18px 0 24px !important; padding-top:16px; border-top:1px dashed #e1d5c7; color:#867868; font-size:12px; }
.comic-page .class-archive { text-align:left; margin-top:32px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.comic-page .class-archive summary { display:flex; justify-content:space-between; cursor:pointer; list-style:none; padding:18px 2px; font-size:14px; color:#776250; }
.comic-page .class-archive summary::-webkit-details-marker { display:none; }
.comic-page .class-archive[open] summary>span { transform:rotate(45deg); }
.comic-page .class-posts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.comic-page .class-post { display:block; min-width:0; border:1px solid var(--line); background:#fff; border-radius:12px; overflow:hidden; }
.comic-page .class-post>img { width:100%; aspect-ratio:1; object-fit:cover; }
.comic-page .class-post>div { padding:16px; }
.comic-page .class-post h4 { font-size:15px; margin:7px 0; line-height:1.6; }
.comic-page .class-post span { color:var(--muted); font-size:10px; }
.comic-page .class-summary { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12px; color:var(--muted); }
.comic-page .class-archive>.text-link { margin:20px 0; }
.comic-page .class-empty { grid-column:1/-1; padding:20px; font-size:13px; }
.comic-page .apply-section { max-width:720px; }
.comic-page .apply-steps { list-style:none; padding:0; margin:35px auto 0; max-width:600px; text-align:left; }
.comic-page .apply-steps li { display:grid; grid-template-columns:100px 1fr; align-items:start; gap:30px; padding:28px 0; border-bottom:1px dashed #e1d2c0; }
.comic-page .step-drawing img { width:100%; height:100px; object-fit:contain; mix-blend-mode:multiply; }
.comic-page .step-copy h3 { font-size:20px; line-height:1.6; font-weight:900; letter-spacing:-.05em; }
.comic-page .step-copy h3>span { color:var(--coral-dark); margin-right:7px; }
.comic-page .step-copy p { font-size:12px; color:var(--muted); margin:8px 0; }
.comic-page .outline-button { display:inline-flex; justify-content:center; align-items:center; min-height:42px; border:1.5px solid #7e6753; background:#fffdf7; border-radius:9px; padding:6px 17px; color:#594638; font-size:13px; font-weight:700; margin-top:8px; box-shadow:2px 2px 0 #ecdec9; }
.comic-page #bank-account { font-size:20px; letter-spacing:.02em; }
.comic-page .application-note { max-width:440px; margin:25px auto 0 !important; color:var(--muted); font-size:11px; }
.comic-page .contact-section { border-top:1px dashed #dfcdbb; padding-top:55px; }
.comic-page .contact-links { display:flex; flex-wrap:wrap; gap:18px; justify-content:center; }
.comic-page .contact-links>a { display:flex; align-items:center; justify-content:space-between; gap:18px; min-width:245px; border:1px solid var(--line); border-radius:12px; padding:18px 22px; text-align:left; background:#fff; }
.comic-page .contact-links small { display:block; font-size:8px; letter-spacing:.1em; color:var(--muted); }
.comic-page .contact-links strong { display:block; font-size:17px; }
.comic-page .contact-icon { display:grid; place-items:center; width:35px; height:35px; border-radius:10px; font-size:27px; line-height:1; }
.comic-page .instagram-icon { color:#fff; background:linear-gradient(35deg,#f9a33b,#e66669,#9d68bc); }
.comic-page .kakao-icon { background:#ffe24a; color:#3f3025; font-size:12px; font-weight:900; }
.comic-page .closing-note { margin-top:50px !important; font-size:20px; color:#78614c; transform:rotate(-3deg); }
.comic-page .site-footer { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 24px; width:min(1100px,calc(100% - 48px)); padding:28px 0 38px; text-align:center; border-top:1px solid var(--line); font-size:11px; }
.comic-page .site-footer .footer-brand, .comic-page .site-footer>p { flex-basis:100%; margin:0; }
.comic-page .site-footer .footer-brand { font-size:16px; }
.comic-page .site-footer>span { flex-basis:100%; font-size:9px; letter-spacing:.15em; color:#ad9782; }
.comic-page .legacy-link { text-decoration:underline; text-underline-offset:4px; }
.comic-page .copy-status { position:fixed; bottom:95px; left:50%; transform:translateX(-50%); z-index:70; max-width:calc(100% - 32px); padding:12px 18px; border-radius:10px; background:#3f352c; color:white; font-size:13px; box-shadow:0 8px 25px #0002; }
@media(max-width:850px) {
  .comic-page .site-header.wrap { min-height:64px; width:100%; padding:7px 18px; background:#fffefaed; border-bottom:1px solid #eee1d2; backdrop-filter:blur(12px); }
  .comic-page .site-header .brand { font-size:15px; }
  .comic-page .mobile-tabbar { background:#fffdf5ed; border-top-color:#ead8c4; }
  .comic-page .mobile-tabbar a[aria-current=page] { color:#ad583f; }
  .comic-page .mobile-tabbar a[aria-current=page] .mobile-tab-icon { background:#ffe7d5; }
  .comic-page .intro-inner { gap:30px; grid-template-columns:1fr 310px; }
  .comic-page .intro-tagline { font-size:26px; }
  .comic-page .intro-section { padding:35px 28px 55px; }
  .comic-page .paper-note { right:-8px; }
  .comic-page .comic-title { font-size:34px; }
  .comic-page .interest-card { padding-inline:12px; }
  .comic-page .interest-card h4 { font-size:13px; }
  
  .comic-page .schedule-card { gap:24px; }
}
@media(max-width:600px) {
  .comic-page .intro-section { padding:25px 28px 48px; }
  .comic-page .intro-inner { display:flex; flex-direction:column; gap:28px; }
  .comic-page .intro-copy { width:100%; }
  .comic-page .intro-copy>.section-kicker { font-size:8px; margin-bottom:8px; }
  .comic-page .brand-banner { max-width:330px; max-height:135px; }
  .comic-page .intro-tagline { font-size:24px; margin-top:14px !important; }
  .comic-page .intro-description { font-size:12px; margin-top:12px !important; }
  .comic-page .intro-copy .comic-button { margin-top:19px; }
  .comic-page .intro-location { font-size:10px; margin-top:13px !important; }
  .comic-page .featured-wrap { width:min(310px,100%); padding-top:30px; padding-bottom:28px; }
  .comic-page .comic-main-card.art-card { padding:15px 15px 12px; transform:rotate(1.5deg); }
  .comic-page .featured-label { font-size:14px; }
  .comic-page .featured-label span { font-size:27px; }
  .comic-page .paper-note { right:-10px; bottom:0; padding:8px 12px; font-size:9px; }
  .comic-page .comic-section { width:calc(100% - 40px); padding:48px 0; }
  .comic-page .comic-title { font-size:29px; gap:9px; -webkit-text-stroke:4px var(--coral); }
  .comic-page .title-mark { width:16px; height:16px; border-width:4px; }
  .comic-page .comic-home .section-kicker { font-size:8px; margin-bottom:12px; }
  .comic-page .section-intro { font-size:12px; margin:17px 0 24px !important; }
  .comic-page .works-grid { gap:7px; }
  .comic-page .work-copy { padding:8px 6px; }
  .comic-page .work-copy h3 { font-size:10px; }
  .comic-page .welcome-comic { display:flex; flex-direction:column; gap:15px; margin:25px auto 20px; }
  .comic-page .comic-panel { width:100%; max-width:300px; }
  .comic-page .comic-panel img { height:230px; }
  .comic-page .comic-panel figcaption { font-size:15px; margin-top:7px; }
  .comic-page .comic-arrow { transform:rotate(80deg); font-size:35px; line-height:1; margin:5px 0; }
  .comic-page .welcome-note { font-size:12px; margin-top:22px !important; }
  .comic-page .mobile-break { display:block; }
  .comic-page .comic-subtitle { font-size:25px; margin:45px 0 24px !important; }
  .comic-page .interests-grid { grid-template-columns:1fr; gap:20px; max-width:420px; margin:auto; }
  .comic-page .interest-card { padding:24px 12px; }
  .comic-page .interest-card:nth-child(2) { transform:none; }
  .comic-page .interest-card h4 { font-size:16px; min-height:0; }
  
  .comic-page .interest-card p { font-size:11px; }
  .comic-page .welcome-sign { width:175px; margin-top:35px; }
  .comic-page .welcome-sign img { height:175px; }
  .comic-page .schedule-card { display:block; padding:15px; box-shadow:4px 5px 0 #f5e9d7; }
  .comic-page .schedule-copy { padding:23px 9px 12px; }
  .comic-page .schedule-copy h3 { font-size:16px; }
  .comic-page .weekly-topic-link { font-size:22px; }
  .comic-page .waiting-art { min-height:280px; }
  .comic-page .schedule-copy .comic-button { display:flex; width:100%; gap:12px; }
  .comic-page .class-posts { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:15px; }
  .comic-page .class-post { flex:0 0 83%; scroll-snap-align:start; }
  .comic-page .class-post h4 { font-size:18px; }
  .comic-page .apply-steps { margin-top:15px; }
  .comic-page .apply-steps li { grid-template-columns:65px 1fr; gap:18px; padding:24px 0; }
  .comic-page .step-drawing img { height:85px; }
  .comic-page .step-copy h3 { font-size:18px; }
  .comic-page .step-copy p { font-size:11px; }
  .comic-page .contact-links { gap:12px; }
  .comic-page .contact-links>a { width:100%; max-width:320px; }
  .comic-page .closing-note { font-size:18px; margin-top:35px !important; }
  .comic-page .site-footer { gap:12px 16px; font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
  .comic-page * { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

/* Keep the original p5 scene behind content, without intercepting any controls. */
.comic-page #bubble-background { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.comic-page #bubble-background canvas { display:block; }
.comic-page .site-shell { position:relative; z-index:1; background:transparent; }

/* Keep the intro centered while the managed card is temporarily hidden. */
.comic-page .intro-inner:has(> .featured-wrap[hidden]) { grid-template-columns:minmax(0,1fr); gap:0; }