/* Hallmark · macrostructure: Index-First · tone: calm practical · anchor hue: green · theme: Garden */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 · Existing font and gallery styles retained. */
html,body{overflow-x:clip}
.portal{color:var(--color-ink);font-family:var(--font-body);padding-block:var(--space-xl)}
.portal-masthead{border-bottom:var(--rule-width) solid var(--color-rule);padding-bottom:var(--space-xl)}
.portal-kicker{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap;color:var(--color-muted);font-size:var(--text-sm)}
.portal h1{font-size:var(--text-title);letter-spacing:-.045em;line-height:1.2;margin:var(--space-lg) 0 var(--space-md);word-break:keep-all;overflow-wrap:anywhere}
.portal h2{font-size:var(--text-section);line-height:1.35;word-break:keep-all}
.portal p{line-height:1.75;overflow-wrap:anywhere}
.portal-lesson{font-size:var(--text-section);font-weight:650;margin:0;max-width:42ch}
.portal-meta{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap;color:var(--color-muted);font-size:var(--text-sm);margin-top:var(--space-md)}
.portal-primary{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);margin-block:var(--space-xl)}
.portal-entry{display:grid;grid-template-columns:1fr auto;gap:var(--space-md);padding:var(--space-xl);border:var(--rule-width) solid var(--color-rule);border-radius:var(--radius-panel);color:var(--color-ink);background:var(--color-surface);text-decoration:none;min-width:0;transition:background-color var(--dur-hover) var(--ease-out)}
.portal-entry:hover{background:var(--color-blue)}
.portal-entry:active{background:var(--color-pink)}
.portal-entry h2{margin:var(--space-sm) 0}
.portal-entry p{font-size:var(--text-sm);color:var(--color-muted);margin:0;max-width:36ch}
.portal-entry .entry-number{font-size:var(--text-sm);font-weight:700;color:var(--color-muted)}
.entry-arrow{align-self:center;font-size:var(--text-section)}
.portal-entry.observer{background:var(--color-blue);border-color:var(--color-blue-ink)}
.portal-entry.observer:hover{background:var(--color-surface)}
.portal-directory{border-top:var(--rule-width) solid var(--color-rule);margin-block:var(--space-xl)}
.portal-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);padding:var(--space-lg) 0;border-bottom:var(--rule-width) solid var(--color-rule);text-decoration:none;color:var(--color-ink)}
.portal-row strong{font-size:var(--text-section)}
.portal-row p{margin:var(--space-xs) 0 0;color:var(--color-muted);font-size:var(--text-sm)}
.portal-row:hover strong{text-decoration:underline;text-underline-offset:var(--space-xs)}
.portal-staff{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap;font-size:var(--text-sm);color:var(--color-muted)}
.portal-staff a{color:var(--color-accent);font-weight:650}
.portal a:focus-visible,.portal button:focus-visible,.portal input:focus-visible,.portal textarea:focus-visible{outline:3px solid var(--color-focus);outline-offset:var(--space-xs)}
.area-label{display:inline-flex;align-items:center;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:700;background:var(--color-blue);color:var(--color-blue-ink)}
.area-label[data-area="연구학교"]{background:var(--color-pink);color:var(--color-pink-ink)}
.portal-notice{padding:var(--space-md) 0;color:var(--color-muted);border-top:var(--rule-width) solid var(--color-rule);font-size:var(--text-sm)}
.portal-flow{list-style:none;padding:0;margin:var(--space-xl) 0;counter-reset:phase}
.portal-flow li{counter-increment:phase;display:grid;grid-template-columns:3rem 1fr auto;align-items:center;gap:var(--space-md);padding:var(--space-lg) 0;border-bottom:var(--rule-width) solid var(--color-rule)}
.portal-flow li::before{content:counter(phase,decimal-leading-zero);color:var(--color-muted);font-variant-numeric:tabular-nums}
.portal-flow p{margin:var(--space-xs) 0 0;color:var(--color-muted);font-size:var(--text-sm)}
.portal-flow small{color:var(--color-muted);white-space:nowrap}
.portal-guide{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);margin-block:var(--space-xl)}
.portal-guide section{border-top:var(--rule-width) solid var(--color-rule);padding-top:var(--space-md)}
.portal-form{max-width:50rem;margin-block:var(--space-xl)}
.portal-form .field{margin-bottom:var(--space-lg)}
.portal-feedback{min-height:1.75em;font-size:var(--text-sm);color:var(--color-accent)}
.portal-event-qr{margin-block:var(--space-xl)}
.portal-event-qr .qr-box{max-width:14rem}
.portal-gallery-heading{border-bottom:var(--rule-width) solid var(--color-rule);padding-block:var(--space-md) var(--space-xl);margin-bottom:var(--space-xl)}
.portal-gallery-heading h1{font-size:var(--text-title);margin-block:var(--space-md)}
@media(max-width:640px){.portal{padding-block:var(--space-md)}.portal-primary{grid-template-columns:1fr;gap:var(--space-md)}.portal-entry{padding:var(--space-lg)}.portal-guide{grid-template-columns:1fr;gap:var(--space-md)}.portal-row{gap:var(--space-md)}.portal-flow li{grid-template-columns:2rem 1fr auto;gap:var(--space-sm)}.top-actions .draft-badge{display:none}.topbar{gap:var(--space-sm)}.brand small{font-size:.65rem}.portal h1{margin-top:var(--space-md)}}
@media(prefers-reduced-motion:reduce){.portal-entry{transition:none}}
@media print{.portal-event-qr{break-inside:avoid}.portal-event-qr .action-row{display:none}}

.portal h1,.portal h2,.portal-row>div,.portal-entry>div{min-width:0;overflow-wrap:anywhere}.portal .btn,.top-actions .text-link{white-space:nowrap}.portal .btn{min-height:44px}.portal-row:focus-visible{outline:3px solid var(--color-focus);outline-offset:var(--space-xs)}
/* Mobile-first public app. The separate lesson document keeps its monitor layout. */
@media screen {
 body.public-app{--layout-app-width:560px;--text-title:2rem;--text-section:1.25rem;font-size:16px;line-height:1.65;padding-bottom:env(safe-area-inset-bottom)}
 body.public-app>.topbar,body.public-app>main,body.public-app>.footer{width:100%;max-width:var(--layout-app-width);margin-inline:auto;padding-inline:var(--space-md)}
 body.public-app>.topbar{height:76px;gap:var(--space-sm)}
 body.public-app .brand{gap:var(--space-sm);min-width:0}
 body.public-app .brand-mark{width:38px;height:38px;line-height:38px;border-radius:var(--radius-sm);font-size:22px;flex-shrink:0}
 body.public-app .brand b{font-size:16px;white-space:nowrap}
 body.public-app .brand small{font-size:10px;letter-spacing:0}
 body.public-app .top-actions{gap:0;flex-shrink:0}
 body.public-app .top-actions .draft-badge{display:none}
 body.public-app .top-actions .text-link{min-height:44px;display:inline-flex;align-items:center;line-height:1;font-size:12px}
 body.public-app>main{min-height:calc(100dvh - 76px);padding-bottom:var(--space-lg)}
 body.public-app>.bottomnav{display:flex;position:fixed;inset:auto 0 0;transform:none;width:100%;max-width:var(--layout-app-width);margin-inline:auto;padding:var(--space-sm) var(--space-sm) max(var(--space-sm),env(safe-area-inset-bottom));border:0;border-top:var(--rule-width) solid var(--color-rule);border-radius:0;box-shadow:none;gap:var(--space-xs);justify-content:space-around;background:var(--color-surface);z-index:20}
 body.public-app>.bottomnav a{display:flex;flex:1;flex-direction:column;justify-content:center;align-items:center;min-width:0;min-height:52px;gap:var(--space-xs);padding:var(--space-xs);border-radius:var(--radius-sm);font-size:12px;line-height:1;white-space:nowrap}
 body.public-app>.bottomnav .icon{width:22px;height:22px}
 body.public-app>.footer{padding-top:var(--space-lg);padding-bottom:calc(96px + env(safe-area-inset-bottom))}
 body.public-app>.footer span{font-size:12px}
 body.public-app>.footer small{font-size:11px;line-height:1.7}
 body.public-app #toast{bottom:calc(88px + env(safe-area-inset-bottom));width:max-content;max-width:min(calc(100% - 32px),calc(var(--layout-app-width) - 32px));font-size:14px;transition:opacity var(--dur-hover) var(--ease-out),transform var(--dur-hover) var(--ease-out)}
 body.public-app .portal{padding-block:var(--space-lg)}
 body.public-app .portal-kicker{display:block;font-size:var(--text-sm)}
 body.public-app .portal-kicker span{display:block}
 body.public-app .portal-kicker span+span{margin-top:var(--space-xs)}
 body.public-app #main h1{font-size:var(--text-title);line-height:1.3;min-width:0;overflow-wrap:anywhere}
 body.public-app .portal-lesson{font-size:1.125rem;line-height:1.6}
 body.public-app .portal-meta{gap:var(--space-xs) var(--space-md);font-size:var(--text-sm)}
 body.public-app .portal-primary{grid-template-columns:minmax(0,1fr);gap:var(--space-md);margin-block:var(--space-lg)}
 body.public-app .portal-entry{padding:var(--space-lg);grid-template-columns:minmax(0,1fr) auto}
 body.public-app .portal-entry h2{font-size:1.375rem}
 body.public-app .portal-entry p{font-size:var(--text-sm);max-width:none}
 body.public-app .portal-directory{margin-block:var(--space-lg)}
 body.public-app .portal-row{gap:var(--space-md);min-height:64px}
 body.public-app .portal-guide{grid-template-columns:minmax(0,1fr);gap:var(--space-md)}
 body.public-app .portal-flow li{grid-template-columns:2rem minmax(0,1fr) auto;gap:var(--space-sm)}
 body.public-app .portal-staff{display:block}
 body.public-app .portal-staff a{display:inline-flex;align-items:center;min-height:48px}
 body.public-app .page{padding-block:var(--space-lg)}
 body.public-app .page-heading h1{font-size:var(--text-title)}
 body.public-app .page-heading p,body.public-app .panel p,body.public-app .resource-card p{font-size:var(--text-sm)}
 body.public-app .section-head{display:block;margin-bottom:var(--space-md)}
 body.public-app .section-head h2{font-size:1.375rem}
 body.public-app .section-head p{font-size:var(--text-sm)}
 body.public-app .search{width:100%;margin-top:var(--space-md)}
 body.public-app .search input{font-size:16px;min-height:48px}
 body.public-app .filters{display:block}
 body.public-app .chips{gap:var(--space-sm)}
 body.public-app .chip{min-height:44px;font-size:var(--text-sm);padding:var(--space-sm) 12px;white-space:nowrap}
 body.public-app .result-count{display:block;margin-top:var(--space-sm);font-size:12px;padding:0}
 body.public-app .cards{grid-template-columns:minmax(0,1fr);gap:var(--space-md)}
 body.public-app .card{display:grid;grid-template-columns:96px minmax(0,1fr);border-radius:var(--radius-panel);box-shadow:none;transition:background-color var(--dur-hover) var(--ease-out)}
 body.public-app .card:hover{transform:none;box-shadow:none;background:var(--color-paper)}
 body.public-app .card-art{height:100%;min-height:220px}
 body.public-app .card-art .icon{width:48px;height:48px}
 body.public-app .card-art .big-number{left:12px;top:var(--space-sm);font-size:28px}
 body.public-app .card-art .period-pill{left:var(--space-sm);right:auto;top:auto;bottom:var(--space-md);max-width:80px;font-size:10px;padding:var(--space-xs) 6px}
 body.public-app .card-art .art-caption{display:none}
 body.public-app .card-art::before{width:80px;height:80px;left:calc(50% - 40px);top:calc(50% - 40px)}
 body.public-app .card-body{padding:var(--space-md);min-width:0}
 body.public-app .card h3{font-size:20px;margin:var(--space-sm) 0;line-height:1.45;overflow-wrap:anywhere}
 body.public-app .card p{font-size:var(--text-sm);line-height:1.7;min-height:0;-webkit-line-clamp:3}
 body.public-app .card-bottom{font-size:11px;gap:var(--space-sm);margin-top:12px;padding-top:12px}
 body.public-app .area-label{font-size:12px;line-height:1.5}
 body.public-app .tag{font-size:10px}
 body.public-app .detail-hero{grid-template-columns:minmax(0,1fr);padding:var(--space-lg);border-radius:var(--radius-panel)}
 body.public-app .detail-hero h1{position:relative;z-index:1}
 body.public-app .detail-hero p{font-size:var(--text-sm);position:relative}
 body.public-app .detail-icon{position:absolute;right:-16px;top:var(--space-md);width:112px;height:112px;opacity:.15}
 body.public-app .detail-icon .icon{width:72px;height:72px}
 body.public-app .detail-grid,body.public-app .detail-side{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
 body.public-app .detail-tabs{gap:var(--space-xs);padding:var(--space-sm) 0}
 body.public-app .detail-tabs a{display:inline-flex;align-items:center;min-height:44px;padding:var(--space-sm);font-size:var(--text-sm);white-space:nowrap}
 body.public-app .detail-tabs .btn{margin-left:0}
 body.public-app .panel{padding:var(--space-lg);border-radius:var(--radius-panel)}
 body.public-app .gallery,body.public-app .resource-grid,body.public-app .timeline-block,body.public-app .timeline-links,body.public-app .prepare-grid,body.public-app .form-grid,body.public-app .two-columns,body.public-app .qr-grid{grid-template-columns:minmax(0,1fr)}
 body.public-app .form-grid,body.public-app .two-columns{gap:0}
 body.public-app .prepare-menu{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm)}
 body.public-app .prepare-menu button{min-height:48px;padding:var(--space-sm);font-size:12px;overflow-wrap:anywhere}
 body.public-app .field{font-size:var(--text-sm)}
 body.public-app .field input,body.public-app .field textarea,body.public-app .field select{font-size:16px;min-height:48px;min-width:0;max-width:100%}
 body.public-app .media-editor .row{display:block}
 body.public-app .help,body.public-app .notice{font-size:12px;overflow-wrap:anywhere}
 body.public-app .check-field{min-height:48px;font-size:var(--text-sm);align-items:center}
 body.public-app .check-field input{width:24px;height:24px;margin:0}
 body.public-app .action-row{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-sm)}
 body.public-app .btn{min-height:48px;font-size:var(--text-sm);white-space:normal;text-align:center;max-width:100%;padding:12px var(--space-md);line-height:1.4}
 body.public-app .btn:hover{transform:none}
 body.public-app .text-link,body.public-app .breadcrumb a{display:inline-flex;align-items:center;min-height:44px;line-height:1.4}
 body.public-app .qr-card{padding:var(--space-lg)}
 body.public-app .qr-box{width:206px}
 body.public-app .empty{padding:var(--space-xl) var(--space-md)}
 body.public-app .foot-note{font-size:12px}
 body.public-app .resource-link{min-height:48px;font-size:var(--text-sm)}
 body.public-app .timeline-links a{min-height:48px;font-size:var(--text-sm)}
 body.public-app .adjacent{flex-direction:column;gap:var(--space-sm)}
 body.public-app .adjacent a{font-size:var(--text-sm);padding:var(--space-md)}
}
@media screen and (max-width:359px){body.public-app .card{grid-template-columns:76px minmax(0,1fr)}body.public-app .card-body{padding:12px}body.public-app .card-art .period-pill{max-width:64px;left:6px;font-size:9px}body.public-app .card h3{font-size:18px}body.public-app .brand b{font-size:15px}body.public-app .brand small{font-size:9px}body.public-app .portal-entry{padding:var(--space-md)}}