:root{--k:#111713;--g:#24443A;--o:#F0965F;--oo:#B4501A;--w:#fff;--mu:#5A645E}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--w);color:var(--k);font-family:'Noto Sans KR','Malgun Gothic',sans-serif;font-size:17px;line-height:1.7;-webkit-text-size-adjust:100%;word-break:keep-all;overflow-wrap:break-word}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.mast{display:flex;justify-content:space-between;align-items:flex-end;padding:22px 0 14px;border-bottom:4px solid var(--k);font-size:13px;letter-spacing:.06em}
.mast .t{font-size:clamp(44px,9vw,96px);font-weight:900;line-height:.9;letter-spacing:-.04em;text-decoration:none}
.mast .t em{font-style:normal;color:var(--o)}
.mast .r{text-align:right;line-height:1.5}
.mast .r b{display:block;font-size:15px;letter-spacing:0}
.nav{display:flex;gap:28px;padding:12px 0;border-bottom:1px solid var(--k);font-size:14px;font-weight:700}
.nav a{text-decoration:none}.nav a:hover,.nav a[aria-current]{color:var(--oo)}
.nav a[aria-current]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:0 56px;align-items:end;padding:40px 0 72px}
.num{display:flex;align-items:flex-end;gap:10px;line-height:.78}
.num b{font-size:clamp(170px,24vw,310px);font-weight:900;letter-spacing:-.07em;color:var(--o)}
.num span{font-size:clamp(24px,3vw,36px);font-weight:900;padding-bottom:.3em}
.cw{position:relative;flex:none;width:clamp(150px,26vw,330px);margin-left:-6px;align-self:flex-end}
.cw:before{content:"";position:absolute;left:8%;right:2%;top:30%;bottom:0;background:var(--g)}
.cw img{position:relative;display:block;width:100%;height:auto;rotate:3deg}
.cw small{position:absolute;left:8%;top:calc(100% + 8px);white-space:nowrap;font:900 11px/1 'Noto Sans KR',sans-serif;letter-spacing:.14em}
.hero h1,.ph h1{margin:0;font-size:clamp(34px,4.4vw,60px);line-height:1.18;font-weight:900;letter-spacing:-.035em}
.hero .by{margin:22px 0 0;font-size:15px;color:var(--mu);border-top:2px solid var(--k);padding-top:12px;display:flex;gap:24px;flex-wrap:wrap}
.hero .by b{color:var(--k)}
.ph{padding:40px 0 28px}
.ph h1{font-size:clamp(32px,4.2vw,56px)}
.ph p{margin:14px 0 0;max-width:46em;color:var(--mu);font-size:18px}
.crumb{font-size:13px;color:var(--mu);margin:0 0 14px;letter-spacing:.02em}
.crumb a{text-decoration:none;border-bottom:1px solid var(--mu)}
h2.k{margin:0 0 6px;font-size:13px;font-weight:900;letter-spacing:.12em;display:flex;gap:12px;align-items:center}
h2.k:after{content:"";flex:1;height:1px;background:var(--k)}
.sec{padding:56px 0}
.hd{font-size:clamp(28px,3.4vw,44px);font-weight:900;line-height:1.2;letter-spacing:-.03em;margin:14px 0 28px;max-width:20ch}
.toc{list-style:none;margin:0;padding:0;columns:2;column-gap:56px}
.toc li{break-inside:avoid;display:grid;grid-template-columns:72px 1fr auto;align-items:baseline;gap:0 8px;padding:14px 0;border-bottom:1px solid var(--k)}
.toc .no{font-size:34px;font-weight:900;line-height:1;letter-spacing:-.04em}
.toc li.off .no{color:#BAC1BC}
.toc b{font-size:19px;font-weight:900}
.toc b a{text-decoration:none;border-bottom:2px solid var(--o)}
.toc .d{grid-column:2/4;color:var(--mu);font-size:15px;line-height:1.55}
.toc .d a{font-size:13px;margin-left:8px;color:var(--k)}
.toc .st{font-size:12px;font-weight:900;letter-spacing:.08em;color:var(--oo)}
.toc li.off .st{color:#6B756F}
.more{display:inline-block;margin-top:26px;font-weight:900;text-decoration:none;border-bottom:2px solid var(--k)}
.more:hover{color:var(--oo);border-color:var(--oo)}
.band{background:var(--g);color:#fff}
.band h2.k{color:#fff}.band h2.k:after{background:rgba(255,255,255,.5)}
.band .more{border-color:#fff}.band .more:hover{color:var(--o);border-color:var(--o)}
.logsplit{display:grid;grid-template-columns:5fr 7fr;gap:56px}
.pull{margin:0;font-size:clamp(26px,3vw,38px);font-weight:900;line-height:1.3;letter-spacing:-.03em}
.pull em{font-style:normal;color:var(--o)}
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:12px;letter-spacing:.08em;text-align:left;padding:8px 0;border-bottom:2px solid #fff;font-weight:900}
.tbl td{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.28);white-space:nowrap}
.tbl .r{text-align:right}
.tbl td.v{font-size:22px;font-weight:900;color:var(--o);text-align:right;width:96px}
.tbl tr.out td{color:rgba(255,255,255,.62)}
.tbl tr.out td.v{font-size:14px;font-weight:500}
.tbl td.p{color:rgba(255,255,255,.75);font-size:15px;padding-left:24px}.tbl th:nth-child(3){padding-left:24px}
.tw{overflow-x:auto}
.post{margin:0 0 44px}
.post h3{margin:0 0 4px;font-size:21px;line-height:1.4;font-weight:900}
.post h3 a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.6)}
.post .m{margin:0 0 8px;font-size:14px;color:rgba(255,255,255,.7)}
.fig{margin-top:40px;background:#fff;color:var(--k);padding:22px 22px 12px}
.fig svg{display:block;width:100%;height:auto}
.fig p{margin:6px 0 0;font-size:13px;color:var(--mu)}
.cm{display:none}
.svc{display:grid;grid-template-columns:7fr 5fr;gap:0 56px;align-items:start}
.orange{background:var(--o);padding:36px 36px 40px}
.orange h3{margin:0;font-size:clamp(28px,3.2vw,42px);line-height:1.2;font-weight:900;letter-spacing:-.03em}
.orange dl{margin:24px 0 0;display:grid;grid-template-columns:104px 1fr;gap:14px 12px;border-top:2px solid var(--k);padding-top:18px}
.orange dt{font-weight:900}.orange dd{margin:0}
.orange p{margin:18px 0 0;font-size:15px}
.mo3{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--k)}
.mo3 div{padding:26px 22px}
.mo3 div+div{border-left:2px solid var(--k)}
.mo3 b{display:block;font-size:46px;line-height:1;font-weight:900;letter-spacing:-.05em}
.mo3 span{font-size:15px;color:var(--mu)}
.btn{display:inline-block;margin-top:22px;padding:15px 28px;background:var(--k);color:#fff;font:900 16px 'Noto Sans KR',sans-serif;border:0;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--g)}
.ask{display:grid;grid-template-columns:5fr 7fr;gap:0 56px}
.ask .big{font-size:clamp(34px,4.4vw,60px);line-height:1.12;font-weight:900;letter-spacing:-.04em}
form{display:grid;gap:18px}
label{font-size:12px;font-weight:900;letter-spacing:.08em}
input,textarea{display:block;width:100%;margin-top:4px;padding:10px 0;font:inherit;font-size:18px;color:var(--k);border:0;border-bottom:2px solid var(--k);background:transparent;outline:none;border-radius:0}
input:focus,textarea:focus{border-bottom-color:var(--o)}
textarea{height:84px;resize:none}
.foot{border-top:4px solid var(--k);padding:16px 0 36px;font-size:13px;color:var(--mu);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot b{color:var(--k);font-size:14px}
.foot nav{display:flex;gap:18px}
.foot a{color:var(--k)}
/* 날짜별 기록 */
.hist details{border-top:2px solid var(--k);padding:6px 0}
.hist summary{cursor:pointer;font-size:22px;font-weight:900;padding:10px 0;list-style:none}
.hist summary::-webkit-details-marker{display:none}
.hist summary small{font-size:14px;font-weight:500;color:var(--mu);margin-left:10px}
.hist summary:before{content:"+";display:inline-block;width:1.2em;color:var(--oo)}
.hist details[open] summary:before{content:"−"}
.hist .gt td.v b{color:var(--oo)}
.hist .gt tr.out td{color:#6B756F}
.hist .shots{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 10px}
.hist .shots a{display:block;width:150px;text-decoration:none;font-size:12px;line-height:1.4;color:var(--mu)}
.hist .shots img{display:block;width:100%;height:auto;border:1px solid var(--k);margin-bottom:4px}
/* 가이드 상세 */
.art{max-width:820px}
.box3{background:var(--g);color:#fff;padding:26px 30px 28px;margin:6px 0 40px}
.box3 h2{margin:0 0 12px;font-size:13px;letter-spacing:.14em;font-weight:900;color:var(--o)}
.box3 ol{margin:0;padding-left:1.3em;font-size:19px;font-weight:700;line-height:1.6}
.box3 li+li{margin-top:8px}
.art h2.s{margin:48px 0 12px;font-size:clamp(24px,2.6vw,32px);line-height:1.25;font-weight:900;letter-spacing:-.03em;border-top:3px solid var(--k);padding-top:14px}
.art p{margin:0 0 14px}
.gt{width:100%;border-collapse:collapse;margin:8px 0 6px;font-size:16px}
.gt th{text-align:left;font-size:12px;letter-spacing:.08em;padding:8px 12px 8px 0;border-bottom:2px solid var(--k)}
.gt td{padding:12px 12px 12px 0;border-bottom:1px solid #C9CFCB;vertical-align:top;line-height:1.55}
.gt td:first-child{font-weight:900;white-space:nowrap}
.chk{list-style:none;margin:0;padding:0}
.chk li{position:relative;padding:12px 0 12px 38px;border-bottom:1px solid #C9CFCB}
.chk li:before{content:"";position:absolute;left:0;top:17px;width:20px;height:20px;border:2px solid var(--k)}
.lim{background:#F3F4F2;padding:20px 26px;border-left:6px solid var(--o)}
.lim ul{margin:0;padding-left:1.1em}.lim li+li{margin-top:6px}
.faq dt{font-weight:900;margin-top:20px;font-size:18px}
.faq dd{margin:4px 0 0;color:#2B332E}
.cap2{font-size:13px;color:var(--mu);margin:6px 0 0}
.srcline{margin-top:48px;padding-top:16px;border-top:1px solid var(--k);font-size:15px}
.art .logtbl td.v{color:var(--oo)}
.mini{display:flex;align-items:flex-end;gap:18px;margin-top:26px}
.mini img{width:110px;rotate:-3deg}
@media(max-width:860px){
 .wrap{padding:0 20px}
 .mast .r{display:none}
 .nav{gap:18px;overflow-x:auto;white-space:nowrap}
 .hero{grid-template-columns:1fr;gap:28px;padding:28px 0 56px}
 .num b{font-size:clamp(150px,44vw,230px)}
 .toc{columns:1}
 .sec{padding:44px 0}
 .logsplit,.svc,.ask{grid-template-columns:1fr;gap:28px}
 .orange{padding:26px 22px 30px}
 .mo3 b{font-size:36px}
 .foot{flex-direction:column;gap:6px}
 .box3{padding:22px 20px}.box3 ol{font-size:17px}
 .gt td:first-child{white-space:normal}
}
@media(max-width:600px){.cd{display:none}.cm{display:block}.tw .tbl{min-width:0}.tw td,.tw th{white-space:normal;padding-left:6px;padding-right:6px;font-size:14px}.tw td:first-child,.tw th:first-child{padding-left:0}.tw td.v{font-size:16px;width:auto}.tw td:nth-child(3){white-space:nowrap}}
/* 모션: html.mot 일 때만(스크립트 켜짐 + 움직임 줄이기 꺼짐). 아니면 전부 정적 */
@keyframes nod{0%,100%{transform:translateY(0) scaleY(1)}22%{transform:translateY(6px) scaleY(.96)}45%{transform:translateY(0) scaleY(1)}68%{transform:translateY(5px) scaleY(.97)}}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.018)}}
.mot .rise{opacity:0;transform:translateY(10px)}
.mot .in .rise,.mot .rise.in{opacity:1;transform:none;transition:opacity .5s ease var(--d),transform .5s cubic-bezier(.2,.7,.2,1) var(--d)}
.mot .dt{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.mot .in .dt{transform:scale(1);transition:transform .5s cubic-bezier(.3,1.7,.5,1) calc(var(--i) * 70ms + .15s)}
.mot body.counted .cw img{transform-origin:50% 100%;animation:nod 1.2s ease 1,breathe 5s ease-in-out 1.4s infinite}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rise,.dt{opacity:1!important;transform:none!important}}