*{box-sizing:border-box}

body{ 
  margin:0;background:var(--color-bg-default);color:var(--color-text-default);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:15px;line-height:1.5;-webkit-text-size-adjust:100%;
}

.wrap{max-width:720px;margin:0 auto;padding:var(--spacing-16) var(--spacing-5) 96px}

a{color:inherit}

h1{ font-size:24px;line-height:1.3;font-weight:600;margin:0 0 var(--spacing-2);letter-spacing:-.01em}

.lede{ margin:0 0 var(--spacing-10);font-size:15px;line-height:1.5;color:var(--color-text-secondary)}
.updated{ margin:0 0 var(--spacing-10);font-size:13px;line-height:1.5;color:var(--color-text-secondary)}

h2{ 
  font-size:20px;line-height:1.3;font-weight:600;margin:var(--spacing-10) 0 var(--spacing-3);padding-top:var(--spacing-6);
  border-top:1px solid var(--color-border-default);letter-spacing:-.01em;
}
h2:first-of-type{border-top:none;padding-top:0}

h3{ font-size:15px;line-height:1.3;font-weight:600;margin:var(--spacing-6) 0 var(--spacing-2);letter-spacing:-.01em}

p{margin:0 0 var(--spacing-4)}
ul,ol{margin:0 0 var(--spacing-4);padding-left:var(--spacing-5)}
li{margin-bottom:var(--spacing-2)}
strong{font-weight:600}

table{ width:100%;border-collapse:collapse;margin:0 0 var(--spacing-4);font-size:15px;line-height:1.5;}
th,td{text-align:left;vertical-align:top;padding:var(--spacing-3) var(--spacing-3);border-bottom:1px solid var(--color-border-subtle)}
th{width:34%;font-weight:600;color:var(--color-text-secondary);white-space:nowrap}

.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

figure{margin:0 0 var(--spacing-5)}
figure img{
  display:block;width:calc(var(--w, 2398) / 2398 * 100%);max-width:100%;height:auto;
  margin:0 auto;border:1px solid var(--color-border-subtle);
}
.img-slot{ 
  padding:var(--spacing-6) var(--spacing-4);border:1px dashed var(--color-border-strong);
  background:var(--color-bg-secondary);text-align:center;font-size:15px;line-height:1.5;
  color:var(--color-text-secondary);
}
.img-slot p{margin:0}
.img-slot p + p{margin-top:var(--spacing-1)}
.img-slot b{color:var(--color-text-default)}
figcaption{ margin-top:var(--spacing-2);font-size:13px;line-height:1.5;color:var(--color-text-secondary)}

.note{ 
  margin:0 0 var(--spacing-4);padding:var(--spacing-4) var(--spacing-4);border-radius:var(--radius-md);
  background:var(--color-bg-secondary);font-size:15px;line-height:1.5;
}
.note :last-child{margin-bottom:0}

.entry{padding-top:var(--spacing-8);margin-top:var(--spacing-10);border-top:1px solid var(--color-border-default)}
.entry:first-of-type{padding-top:0;margin-top:var(--spacing-8);border-top:none}
.entry h2{margin:0 0 var(--spacing-3);padding-top:0;border-top:none}
.entry-date{ display:block;margin-bottom:var(--spacing-1);font-size:13px;line-height:1.5;color:var(--color-text-secondary)}
.entry-date-cont{height:0;margin-bottom:0}
.entry.entry-cont{padding-top:0;border-top:none}

.back{margin-top:var(--spacing-8)}
.back a{ display:inline-block;padding:var(--spacing-3) var(--spacing-4);border-radius:var(--radius-sm);
  background:var(--color-bg-tertiary);color:var(--color-text-default);
  font-size:15px;font-weight:500;text-decoration:none}
@media (hover:hover){ .back a:hover{background:var(--color-bg-hover)} }

.qna{margin:0}
.qna-item{border-bottom:1px solid var(--color-border-subtle)}
.qna-item:first-child{border-top:1px solid var(--color-border-subtle)}
.qna-q{ width:100%;box-sizing:border-box;display:flex;align-items:center;
  justify-content:space-between;gap:var(--spacing-3);padding:var(--spacing-4) 0;background:none;border:none;
  cursor:pointer;text-align:left;font-family:inherit;font-size:15px;font-weight:600;
  color:var(--color-text-default);line-height:1.3}
.qna-icon{flex-shrink:0;width:20px;height:20px;position:relative}
.qna-icon::before,.qna-icon::after{content:'';position:absolute;
  background:var(--color-text-secondary);border-radius:2px;transition:opacity .2s}
.qna-icon::before{width:2px;height:14px;top:3px;left:9px}
.qna-icon::after{width:14px;height:2px;top:9px;left:3px}
.qna-q[aria-expanded="true"] .qna-icon::before{opacity:0}
.qna-a{padding:0 0 var(--spacing-5)}
.qna-a p{ font-size:15px;color:var(--color-text-secondary);line-height:1.5;margin:0 0 var(--spacing-3)}
.qna-a p:last-child{margin-bottom:0}
.qna-a ul,.qna-a ol{ margin:0 0 var(--spacing-3);padding-left:var(--spacing-5);font-size:15px;color:var(--color-text-secondary);line-height:1.5}
.qna-a ul:last-child,.qna-a ol:last-child{margin-bottom:0}
.qna-a li ul{margin:var(--spacing-2) 0 0}

h2.qna-head{border-top:none;padding-top:0;margin-top:var(--spacing-12)}

header.topbar{position:sticky;top:0;z-index:var(--z-sticky)}

h1,h2,h3{scroll-margin-top:76px}

.apply-shot{display:block;width:100%;height:auto;box-sizing:border-box;
  margin:var(--spacing-2) 0 2px;border:1px solid var(--color-border-strong);border-radius:var(--radius-2xl)}
.apply-callout{ margin:var(--spacing-2) 0 0;padding:var(--spacing-3) var(--spacing-4);
  font-size:13px;line-height:1.5;color:var(--color-text-secondary);word-break:keep-all;
  background:var(--color-bg-secondary);border-radius:var(--radius-md)}

.cards{display:flex;flex-direction:column;gap:var(--spacing-2);margin-top:var(--spacing-8)}

.card{
  display:flex;align-items:center;gap:var(--spacing-5);padding:var(--spacing-4);
  border:1px solid var(--color-border-default);border-radius:var(--radius-md);text-decoration:none;
}
.card:hover{background:var(--color-bg-hover)}

.card-body{flex:1;min-width:0}
.card-title{ margin:0 0 var(--spacing-1);padding-top:0;border-top:none;font-size:17px;font-weight:500;}
.card-desc{ 
  margin:0;font-size:15px;line-height:1.5;color:var(--color-text-secondary);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.card-thumb{
  flex:0 0 auto;width:180px;aspect-ratio:16/9;
  background:var(--color-bg-secondary);overflow:hidden;
}
.card-thumb img{display:block;width:100%;height:100%;object-fit:cover}

@media (max-width:560px){
  .card{flex-direction:column;align-items:stretch;gap:var(--spacing-3)}
  .card-thumb{order:-1;width:100%}
}