:root{--ink:#20344b;--navy:#213d60;--muted:#536575;--line:#cbd4dc;--soft:#f1f4f6;--paper:#fff;color:var(--ink);background:var(--paper);font-family:"Noto Sans KR",Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px}
a{color:inherit}
a:focus-visible,summary:focus-visible,.table-scroll:focus-visible{outline:3px solid #117e9b;outline-offset:3px}
.skip{position:absolute;left:-9999px;z-index:50;padding:.75rem 1rem;background:var(--navy);color:white}
.skip:focus{left:1rem;top:1rem}
.content-width{width:min(100% - 2.5rem,1220px);margin-inline:auto}
.utility-wrap{border-bottom:1px solid var(--line);background:#f7f9fa}
.utility{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:38px;color:var(--muted);font-size:.72rem;letter-spacing:.08em}
.utility nav{display:flex;gap:1.25rem}
.utility a{text-decoration:none}
.utility a:hover,.utility a:focus-visible{text-decoration:underline}
.brand-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:1.5rem;min-height:118px}
.brand{font-family:"Noto Serif KR",Georgia,serif;font-weight:700;font-size:clamp(2.25rem,4.2vw,3.65rem);letter-spacing:-.09em;white-space:nowrap;text-decoration:none;line-height:1.25}
.brand-tagline{margin:0;align-self:end;padding-bottom:2.35rem;color:var(--muted);font-size:.78rem}
.search-standby{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted);border-bottom:1px solid var(--line);padding:.65rem .25rem;min-width:130px;font-size:.78rem}
.search-standby>span{font-size:1.3rem;line-height:1}
.main-nav{display:flex;align-items:center;gap:clamp(.75rem,2.4vw,2rem);min-height:54px;border-top:2px solid var(--navy);border-bottom:1px solid var(--line);white-space:nowrap;overflow-x:auto}
.main-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:.86rem;font-weight:700;text-decoration:none}
.main-nav a:hover,.main-nav a:focus-visible{color:#0c667e;text-decoration:underline;text-underline-offset:6px}
.mobile-menu{display:none}
.eyebrow,.section-label{font-size:.7rem;letter-spacing:.16em;font-weight:700;color:#53708b}
.section-label{margin:.8rem 0}
h1,h2,h3,p{overflow-wrap:break-word}
.top-layout{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(250px,.85fr);gap:clamp(1.4rem,3vw,3rem);padding-top:2.2rem}
.primary-column{min-width:0}
.media-slot{background:linear-gradient(145deg,#e8edf0,#d0dbe3);display:flex;align-items:center;justify-content:center;color:#526779;font-size:.78rem;letter-spacing:.07em}
.hero-media{aspect-ratio:16/9}
.hero-copy{padding:1.15rem 0 2.25rem;border-bottom:3px double var(--navy)}
.hero-copy h1,.hub-heading h1,.article-page h1{font-family:"Noto Serif KR",Georgia,serif;font-weight:700;line-height:1.22;letter-spacing:-.055em}
.hero-copy h1{font-size:clamp(2.35rem,4vw,3.55rem);margin:.55rem 0}
.hero-copy>p:last-child{color:var(--muted);line-height:1.75;margin-bottom:0}
.sidebar{border-left:1px solid var(--line);padding-left:clamp(1.2rem,2.5vw,2.5rem)}
.side-panel{border-top:2px solid var(--navy);padding:1.15rem 0 1.4rem}
.side-panel h2{font-family:"Noto Serif KR",Georgia,serif;font-size:1.24rem;margin:.25rem 0 .75rem}
.side-panel p:not(.eyebrow){color:var(--muted);font-size:.84rem;line-height:1.7}
.side-panel a,.sister-card a{display:inline-flex;min-height:44px;align-items:center;font-size:.8rem;font-weight:700;text-decoration:none}
.side-panel a:hover,.sister-card a:hover{text-decoration:underline}
.briefing{background:var(--soft);padding:1.25rem;margin-bottom:1rem;border:0}
.sister-card{background:var(--navy);color:white;padding:1.4rem;display:flex;flex-direction:column;gap:.3rem}
.sister-card .eyebrow{color:#bdcedd}
.sister-card strong{font-family:"Noto Serif KR",Georgia,serif;font-size:1.5rem}
.section-block{padding:3rem 0}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:1rem;border-bottom:2px solid var(--navy);padding-bottom:.75rem}
.section-heading h2{font-family:"Noto Serif KR",Georgia,serif;font-size:clamp(1.35rem,2.3vw,2rem);margin:0}
.section-heading .eyebrow{margin:0 0 .35rem}
.section-heading a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;font-size:.78rem;font-weight:700;text-decoration:none}
.section-heading a:hover{text-decoration:underline}
.empty-list{display:flex;gap:1rem;align-items:center;min-height:120px;border-bottom:1px solid var(--line);color:var(--muted)}
.empty-list p{line-height:1.6}
.rule-number{font-family:Georgia,serif;color:#7890a3}
.guide-section{padding-top:2rem}
.guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;padding-top:1.3rem}
.guide-card{min-height:165px;background:var(--navy);color:white;padding:1rem;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none}
.guide-card:nth-child(even){background:#315778}
.guide-card span:first-child{font-family:Georgia,serif;color:#b8cee0}
.guide-card strong{font-family:"Noto Serif KR",Georgia,serif;font-size:1.25rem}
.guide-card span:last-child{align-self:end}
.guide-card:hover{background:#0e6078}
.lower-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding-bottom:4rem}
.lower-grid .section-block{padding-top:1rem}
.empty-note{background:var(--soft);color:var(--muted);margin:1rem 0 0;padding:1.4rem;line-height:1.7}
.site-footer{background:#e9edf0;border-top:1px solid var(--line);padding:2.4rem 0 3rem}
.footer-inner{display:grid;grid-template-columns:1fr 2fr;gap:.6rem 2rem}
.footer-inner strong{font-family:"Noto Serif KR",Georgia,serif;font-size:1.25rem}
.footer-inner p{margin:.5rem 0;font-size:.8rem;color:var(--muted);line-height:1.65}
.footer-inner nav{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem;align-self:start}
.footer-inner nav a{display:inline-flex;align-items:center;min-height:44px;font-size:.78rem;text-decoration:none}
.footer-inner nav a:hover{text-decoration:underline}
.footer-notice{grid-column:1/-1}
.hub-page,.article-page{padding-top:2rem;padding-bottom:5rem;min-height:65vh}
.breadcrumb{display:flex;align-items:center;gap:.6rem;color:var(--muted);font-size:.78rem;margin-bottom:2.5rem}
.breadcrumb a{min-height:44px;display:inline-flex;align-items:center}
.hub-heading{max-width:760px;padding-bottom:2rem;border-bottom:3px double var(--navy)}
.hub-heading h1{font-size:clamp(2.7rem,5vw,4.8rem);margin:.5rem 0}
.hub-heading>p:last-child{font-size:1.05rem;line-height:1.7;color:var(--muted)}
.topic-list{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
.topic-list li{min-height:100px;border-top:2px solid var(--navy);background:var(--soft);padding:1.2rem;font-family:"Noto Serif KR",Georgia,serif;font-weight:700}
.about-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.about-sections>div{background:var(--soft);padding:1.3rem;scroll-margin-top:2rem}
.about-sections h2{font-size:1.1rem}
.about-sections p{color:var(--muted);line-height:1.7}
.article-page{max-width:850px}
.article-page article{border-top:3px double var(--navy);padding-top:1.5rem}
.article-page h1{font-size:clamp(2.4rem,5vw,4.5rem);margin:.7rem 0 1.3rem}
.article-meta{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;border-bottom:1px solid var(--line);padding-bottom:1.3rem;color:var(--muted);font-size:.8rem}
.article-body{font-family:"Noto Serif KR",Georgia,serif;font-size:1.08rem;line-height:1.95;white-space:pre-line;padding-top:2rem}
@media(max-width:900px){.top-layout{grid-template-columns:minmax(0,1fr)}.sidebar{border-left:0;padding-left:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.side-panel{margin:0}.guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.brand-tagline{display:none}}
@media(max-width:650px){.content-width{width:min(100% - 2rem,1220px)}.utility-wrap,.main-nav,.search-standby{display:none}.brand-row{display:flex;justify-content:space-between;min-height:85px;gap:1rem}.brand{font-size:clamp(1.8rem,7vw,2.55rem)}.mobile-menu{display:block;position:relative}.mobile-menu summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.5rem;min-height:44px;font-size:.8rem;font-weight:700}.mobile-menu summary::-webkit-details-marker{display:none}.mobile-menu nav{position:absolute;z-index:10;right:0;top:100%;width:min(80vw,300px);background:white;border:1px solid var(--line);box-shadow:0 10px 25px #20344b24;padding:.5rem;display:flex;flex-direction:column}.mobile-menu nav a{display:flex;align-items:center;min-height:44px;padding:0 .8rem;text-decoration:none}.top-layout{padding-top:1rem}.sidebar{grid-template-columns:1fr}.guide-grid,.lower-grid,.topic-list,.about-sections{grid-template-columns:1fr 1fr}.section-block{padding:2.2rem 0}.footer-inner{grid-template-columns:1fr}.footer-notice{grid-column:auto}.hero-copy h1{font-size:2.35rem}}
@media(max-width:420px){.guide-grid,.lower-grid,.topic-list,.about-sections{grid-template-columns:1fr}.guide-card{min-height:115px}.section-heading{align-items:start}.section-heading a{font-size:.72rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.hero-media{position:relative;overflow:hidden;margin:0}
.hero-media img,.article-illustration img{display:block;width:100%;height:100%;object-fit:cover}
.hero-media figcaption{position:absolute;left:1rem;bottom:1rem;background:#ffffffdd;color:#20344b;padding:.3rem .6rem;font-size:.7rem}
.article-illustration{margin:1.5rem 0}.article-illustration img{height:auto;aspect-ratio:16/9}.article-illustration figcaption{color:#536575;font-size:.72rem;margin-top:.4rem}

.guide-card img{width:100%;aspect-ratio:16/9;object-fit:cover;margin:.45rem 0}
.guide-card small,.topic-list small{display:block;font-family:Arial,sans-serif;font-size:.65rem;font-weight:400;line-height:1.4}
.topic-list img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:.55rem}
:root{--accent-public:#1f3a5f;--card-radius:6px}
@media(min-width:901px){.hero{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:center}.hero-media{aspect-ratio:4/3}.hero-copy{border-bottom:0;padding:0}.hero-copy h1{font-size:clamp(1.5rem,2.5vw,2.3rem)}}
/* PHP 제출본의 공개 카드·검색·분류 동작을 Java 발행 글에 연결한 영역. */
.mag-category-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0}
.mag-category-chips a{display:inline-flex;align-items:center;min-height:44px;padding:.45rem .8rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-size:.82rem}
.mag-category-chips .current{background:var(--accent-public);color:#fff;border-color:var(--accent-public)}
.mag-article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.mag-article-card{display:flex;flex-direction:column;gap:.5rem;min-width:0;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:var(--card-radius);overflow:hidden}
.mag-article-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.mag-article-card span{padding:0 1rem;font-weight:700;line-height:1.5}
.mag-article-card small{padding:0 1rem 1rem;color:var(--muted);line-height:1.55}
.mag-article-list{list-style:none;padding:0;margin:1rem 0}.mag-article-list li{padding:.8rem 0;border-top:1px solid var(--line)}
.mag-article-list a{font-weight:700;text-decoration:none}.mag-article-list p{margin:.35rem 0 0;color:var(--muted);font-size:.85rem}
.mag-pager{display:flex;justify-content:center;align-items:center;gap:1rem;margin:2rem 0}.mag-pager a{padding:.5rem .8rem;border:1px solid var(--line);border-radius:6px}
.mag-search{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1.5rem 0}.mag-search label{font-weight:700}.mag-search input{min-height:44px;min-width:min(100%,260px);padding:.55rem;border:1px solid var(--line);border-radius:5px;font:inherit}.mag-search button{min-height:44px;padding:.55rem 1rem;background:var(--accent-public);color:white;border:0;border-radius:5px;font:inherit;cursor:pointer}
.article-summary{font-size:1.08rem;line-height:1.7;color:var(--muted)}
@media(max-width:760px){.mag-article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.mag-article-grid{grid-template-columns:1fr}.mag-search{align-items:stretch}.mag-search input{flex:1}}