/* 비행 기록 게시판 — 블로그형. scripts/build-journal.py 가 /journal/journal.css 로 복사한다. */
:root{--bg:#000;--panel:#0E0E10;--panel-2:#151517;--t1:#FFF;--t2:#E6E6EA;--t3:#C2C2C9;--t4:#9E9EA6;--label:#B4B4BC;
--acc:#EC911D;--line:rgba(255,255,255,.14);--line-soft:rgba(255,255,255,.08);
--fd:"FR Display","Pretendard Variable",-apple-system,sans-serif;--fb:"Pretendard Variable",-apple-system,sans-serif;--fm:"IBM Plex Mono",ui-monospace,monospace}
@font-face{font-family:"Pretendard Variable";src:url("/assets/PretendardVariable.woff2") format("woff2-variations");font-weight:45 920;font-display:swap}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--t3);font:400 16px/1.8 var(--fb);word-break:keep-all;overflow-wrap:break-word;-webkit-text-size-adjust:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
img{max-width:100%;height:auto;display:block}

/* 상단 */
.topbar{position:sticky;top:0;z-index:20;background:rgba(0,0,0,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft)}
.topbar .in{max-width:1120px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.topbar .home img{width:150px}
.topnav{display:flex;align-items:center;gap:22px;font-size:14.5px}
.topnav a{text-decoration:none;color:var(--t3)}
.topnav a:hover,.topnav a.on{color:var(--t1)}
.topnav .cta{font:500 11.5px/1 var(--fm);letter-spacing:.12em;color:#000;background:var(--acc);padding:10px 12px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.wrap-n{max-width:760px;margin:0 auto;padding:0 24px}

/* 목록 */
.list-head{padding:56px 0 8px}
.kick{margin:0;font:400 11.5px/1.6 var(--fm);letter-spacing:.2em;color:var(--acc)}
.list-head h1{margin:10px 0 0;font:800 clamp(32px,4.6vw,48px)/1.2 var(--fb);letter-spacing:-.02em;color:var(--t1)}
.list-head .lead{margin:14px 0 0;max-width:640px;color:var(--t3);font-size:16px}
.tabs{display:flex;gap:28px;margin:32px 0 4px;border-bottom:1px solid var(--line)}
.tabs a{position:relative;display:inline-flex;align-items:baseline;gap:6px;padding:0 0 14px;text-decoration:none;font-size:16px;color:var(--t4);white-space:nowrap}
.tabs a i{font:400 12px/1 var(--fm);font-style:normal;color:var(--t4)}
.tabs a:hover{color:var(--t1)}
.tabs a.on{color:var(--t1);font-weight:700}
.tabs a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--acc)}
.tabs a.on i{color:var(--acc)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
.post-card{padding:30px 0 30px;border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column}
.post-card .pc-d{display:flex;flex-wrap:wrap;gap:4px 12px;margin-bottom:12px;font-size:14px;color:var(--t4)}
.post-card .vw::before{content:"·";margin-right:12px;color:var(--line)}
.post-card .thumb{display:block;overflow:hidden;background:var(--panel);aspect-ratio:16/9}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.post-card:hover .thumb img{transform:scale(1.03)}
.post-card .cat{margin-top:16px;font:500 11.5px/1.4 var(--fm);letter-spacing:.14em;color:var(--acc)}
.post-card h2,.post-card h3{margin:6px 0 0;font:700 21px/1.45 var(--fb);color:var(--t1);letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-card h2 a,.post-card h3 a{text-decoration:none}
.post-card h2 a:hover,.post-card h3 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--acc)}
.post-card p{margin:8px 0 0;font-size:15.5px;line-height:1.7;color:var(--t4);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.series{color:var(--acc)}
.empty{margin:40px 0 80px;padding:48px 28px;border:1px dashed var(--line);text-align:center}
.empty b{display:block;color:var(--t1);font-size:18px}
.empty p{margin:8px auto 18px;max-width:520px;color:var(--t4)}
.empty a{color:var(--acc);text-decoration:none}

/* 글 */
.crumb{padding-top:32px;font-size:14px;color:var(--t4)}
.crumb a{text-decoration:none}.crumb a:hover{color:var(--acc)}
.crumb span{margin:0 6px}
.post-head{padding:18px 0 26px;border-bottom:1px solid var(--line-soft)}
.post-head .cat{font:500 12px/1.4 var(--fm);letter-spacing:.14em;color:var(--acc);text-decoration:none}
.post-head h1{margin:10px 0 0;font:800 clamp(26px,3.8vw,38px)/1.35 var(--fb);letter-spacing:-.02em;color:var(--t1)}
.meta{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;color:var(--t4)}
.meta span::before{content:"·";margin-right:14px;color:var(--line)}
.hero{margin:28px 0 0}
.hero img{width:100%}
.hero figcaption,.body figcaption{margin-top:10px;font-size:13.5px;color:var(--t4);text-align:center}
.vid-wrap{display:flex;flex-direction:column;align-items:center}
.vid{position:relative;display:block;width:min(340px,100%);aspect-ratio:9/16;margin:0;padding:0;border:0;background:#000;cursor:pointer;overflow:hidden}
.vid img{width:100%;height:100%;object-fit:cover;border-radius:0}
.vid .play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--acc);display:grid;place-items:center}
.vid .play svg{width:24px;height:24px;fill:#000;margin-left:4px}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.keyfacts{margin:28px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);overflow:hidden}
.keyfacts div{background:var(--panel);padding:14px 16px}
.keyfacts span{display:block;font-size:12.5px;color:var(--t4)}
.keyfacts b{display:block;margin-top:4px;font:700 20px/1.2 var(--fd);color:var(--t1)}
.evbox{margin:24px 0 0;padding:16px 18px;border:1px solid var(--acc);background:rgba(236,145,29,.08);display:flex;gap:16px;align-items:flex-start}
.evbox b{flex:none;font:500 11.5px/1.7 var(--fm);letter-spacing:.16em;color:var(--acc)}
.evbox span{font-size:15px;color:var(--t2)}
.evbox.ended{border-color:var(--line);background:var(--panel)}.evbox.ended b{color:var(--t4)}

.body{padding:12px 0 8px;font-size:17px;line-height:1.95;color:var(--t2)}
.body p{margin:18px 0}
.body h2{margin:52px 0 0;padding-top:4px;font:800 24px/1.4 var(--fb);color:var(--t1);letter-spacing:-.01em}
.body h2::before{content:"";display:block;width:28px;height:3px;background:var(--acc);margin-bottom:14px}
.body h3{margin:36px 0 0;font:700 19px/1.5 var(--fb);color:var(--t1)}
.body strong{color:var(--t1)}
.body a{color:var(--acc)}
.body ul,.body ol{padding-left:22px;margin:16px 0}
.body li::marker{color:var(--acc)}
.body ul.chklist{list-style:none;padding:0;border:1px solid var(--line)}
.body li.chk{position:relative;margin:0;padding:12px 16px 12px 46px;border-top:1px solid var(--line-soft)}
.body li.chk:first-child{border-top:0}
.body li.chk::before{content:"";position:absolute;left:16px;top:17px;width:16px;height:16px;border:1.5px solid var(--acc)}
.body li{margin:6px 0}
.body blockquote{margin:24px 0;padding:4px 0 4px 18px;border-left:3px solid var(--acc);color:var(--t3)}
.body code{font-family:var(--fm);font-size:.88em;background:var(--panel-2);padding:2px 6px;}
.body figure{margin:30px 0}
.body figure img{margin:0 auto}
.body a.zoom{display:block;position:relative;cursor:zoom-in}
.body a.zoom::after{content:"";position:absolute;right:8px;bottom:8px;width:30px;height:30px;background:rgba(0,0,0,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center/17px no-repeat;border:1px solid var(--line);pointer-events:none}
.body a.zoom:hover::after{border-color:var(--acc)}
html.lb-on{overflow:hidden}
dialog.lb{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#000;color:var(--t1)}
dialog.lb::backdrop{background:#000}
.lb-in{width:100%;height:100%;overflow:auto;display:flex;align-items:center;justify-content:center;overscroll-behavior:contain}
.lb-in img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in}
.lb.full .lb-in{display:block}
.lb.full .lb-in img{max-width:none;max-height:none;cursor:zoom-out}
.lb-x{position:absolute;top:0;right:0;z-index:2;width:52px;height:52px;background:rgba(0,0,0,.6);border:0;color:#fff;font-size:30px;line-height:1;cursor:pointer}
.lb-x:hover{color:var(--acc)}
.lb-cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(0,0,0,.72);font-size:13px;color:var(--t3);text-align:center;pointer-events:none}
.lb.full .lb-cap{display:none}
.body hr{border:0;border-top:1px solid var(--line-soft);margin:40px 0}
.tbl{overflow-x:auto;margin:24px 0;border:1px solid var(--line);}
.tbl table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.6}
.tbl th,.tbl td{padding:12px 14px;text-align:left;border-top:1px solid var(--line-soft);vertical-align:top}
.tbl th{font-weight:600;color:var(--t1);background:var(--panel-2);border-top:0;white-space:nowrap}
.tbl td{color:var(--t2)}
.tbl td:first-child{color:var(--t1);font-weight:600;white-space:nowrap}
.tbl tr:hover td{background:rgba(255,255,255,.02)}
.admonition{margin:26px 0;padding:16px 18px;background:var(--panel);border-left:3px solid var(--acc)}
.admonition .admonition-title{margin:0 0 6px;font-weight:700;color:var(--t1);font-size:15px}
.admonition p{margin:6px 0;font-size:16px}
.admonition.warning{border-left-color:#E5484D}
.admonition.tip{border-left-color:#3FB68B}

.quiz,.faq,.refs,.srcs,.more{margin-top:48px}
.quiz h2,.faq h2,.refs h2,.srcs h2,.more h2{margin:0 0 14px;font:800 21px/1.4 var(--fb);color:var(--t1)}
.quiz>ol{list-style:none;margin:0;padding:0}
.quiz .q{padding:18px 20px;margin-bottom:12px;background:var(--panel);border:1px solid var(--line-soft);}
.quiz .qq{margin:0;color:var(--t1);font-weight:600}
.quiz .qq b{color:var(--acc);margin-right:4px}
.quiz .opts{list-style:none;margin:10px 0 0;padding:0;color:var(--t2)}
.quiz .opts li{margin:4px 0}.quiz .opts b{color:var(--t4);font-weight:400;margin-right:4px}
.quiz details{margin-top:12px}
.quiz summary{cursor:pointer;color:var(--acc);font-size:14.5px}
.quiz details p{margin:8px 0 0;color:var(--t2);font-size:15.5px}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq details:first-of-type{border-top:1px solid var(--line-soft)}
.faq summary{cursor:pointer;list-style:none;padding:16px 0;display:flex;justify-content:space-between;gap:12px;font-weight:600;color:var(--t1)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";font-family:var(--fm);color:var(--acc)}
.faq details[open] summary::after{content:"－"}
.faq p{margin:0 0 18px;color:var(--t3)}
.refs ol{margin:0;padding-left:22px;font-size:15px;color:var(--t3)}
.refs li{margin:6px 0}.refs a{color:var(--t2)}
.srcs div{display:flex;flex-direction:column;border-top:1px solid var(--line-soft)}
.srcs a{padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:15px;color:var(--t2);text-decoration:none}
.srcs a:hover{color:var(--acc)}
.cta-box{margin:56px 0 0;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;gap:20px 32px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-box b{display:block;color:var(--t1);font-size:18px}
.cta-box p{margin:6px 0 0;font-size:15px;color:var(--t3);max-width:440px}
.cta-box .acts{display:flex;gap:10px;flex-wrap:wrap}
.cta-box .acts a{display:inline-flex;align-items:center;gap:10px;padding:13px 18px;border:1px solid var(--line);text-decoration:none;font-size:14.5px;color:var(--t1);white-space:nowrap}
.cta-box .acts a.pri{background:var(--acc);border-color:var(--acc);color:#000;font-weight:700}
.cta-box .acts a.pri span{font-family:var(--fm);letter-spacing:.04em}
.cta-box .acts a:not(.pri):hover{border-color:var(--acc)}
.more .grid{column-gap:28px}
.more .post-card{padding:18px 0}
.more .post-card h3{font-size:17px}
.more .post-card p{display:none}

footer{margin-top:72px;border-top:1px solid var(--line-soft);padding:32px 0 56px;font-size:13.5px;line-height:2;color:var(--t4)}
footer .fl{margin-bottom:10px}
footer a{text-decoration:none}footer a:hover{color:var(--acc)}

@media (max-width:760px){
  .topbar .in{padding:10px 16px}
  .topbar .home img{width:124px}
  .topnav{gap:14px;font-size:14px}
  .topnav a[href="/#session"]{display:none}
  .topnav .cta{padding:9px 10px;letter-spacing:.06em}
  .wrap,.wrap-n{padding:0 16px}
  .list-head{padding:36px 0 4px}
  .tabs{gap:22px;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a{flex:none;font-size:15px}
  .grid{grid-template-columns:1fr}
  .post-card{padding:24px 0}
  .post-card h2{font-size:19px}
  .more .grid{grid-template-columns:1fr 1fr;column-gap:16px}
  .more .post-card h3{font-size:15px}
  .body{font-size:16.5px}
  .cta-box{padding:20px}
}