/* Interop (Inter + Noto Sans KR, OFL). 웨이트는 Regular·Medium·SemiBold·Bold 4개만 씀 (ExtraBold 이상 안 씀). 출시 후 서브셋으로 교체 */
@font-face{font-family:'Interop';font-weight:400;font-display:swap;src:url(https://cdn.jsdelivr.net/gh/jhaemin/Interop@1.8/web/fonts/Interop-Regular.woff2) format('woff2')}
@font-face{font-family:'Interop';font-weight:500;font-display:swap;src:url(https://cdn.jsdelivr.net/gh/jhaemin/Interop@1.8/web/fonts/Interop-Medium.woff2) format('woff2')}
@font-face{font-family:'Interop';font-weight:600;font-display:swap;src:url(https://cdn.jsdelivr.net/gh/jhaemin/Interop@1.8/web/fonts/Interop-SemiBold.woff2) format('woff2')}
@font-face{font-family:'Interop';font-weight:700;font-display:swap;src:url(https://cdn.jsdelivr.net/gh/jhaemin/Interop@1.8/web/fonts/Interop-Bold.woff2) format('woff2')}

:root{
  --blue:#0088FF; --red:#FF3700;
  --blue-weak:rgba(0,136,255,.2); --red-weak:rgba(255,55,0,.2);
  --g09:#1B1D1F; --g08:#343639; --g07:#484A4D; --g06:#6B6F72; --g05:#7A7D80;
  --g04:#B4B7BA; --g03:#E3E5E8; --g02:#F0F1F2; --g01:#F7F8FA;
  --pad-text:20px; --pad-obj:18px;
  --frame:720px; /* 보이는 영역 최대 폭. 이보다 좁은 화면에서는 화면 폭에 맞춰 줄어듦 */
  --card:336px; /* 새 공고 카드 폭. 720px 영역에 두 장이 딱 맞음 */
}
*{box-sizing:border-box}
html,body{margin:0;background:#FFFFFF;overflow-x:clip}
body{font-family:'Interop',system-ui,-apple-system,sans-serif;color:var(--g09);word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,p{margin:0}
h1,h2,h3,b,strong{font-weight:700}

/* 자간: 글자 크기별. em은 상속되면 부모 기준 px로 굳으므로 요소마다 직접 지정
   1~12px -2.5% / 13~20px -3.0% / 21px~ -3.5% */
*{letter-spacing:-0.03em}
.pin-badge,.pin-name,.meta,.card-when,.row-entity,.row-side,.notice p,.caption{letter-spacing:-0.025em}
.hero h1{letter-spacing:-0.035em}
ul{list-style:none;margin:0;padding:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.frame{max-width:var(--frame);min-height:100vh;min-height:100dvh;margin:0 auto;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
.grow{flex-grow:1}

/* 헤더 */
.header{display:flex;align-items:center;justify-content:space-between;padding:26px 4px 8px var(--pad-text)}
.header--back{justify-content:flex-start;gap:4px;padding:26px var(--pad-text) 8px 10px}
.header img{height:24px;display:block}
.icon-btn{width:44px;height:44px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--g07)}
.page-title{font-size:18px;font-weight:700}

/* 로고 (원형). 이미지가 없으면 첫 글자 */
.logo{display:block;position:relative;flex-shrink:0;width:var(--s);height:var(--s);border-radius:1000px;overflow:hidden;background:var(--g02);box-shadow:inset 0 0 0 1px var(--g03)}
.logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.logo-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:400;color:var(--g04);font-size:calc(var(--s) * .4)}

/* 찜 줄 */
/* 가로 스크롤 줄은 프레임 밖 화면 끝까지 보이게 하고, 시작 위치만 프레임에 맞춤 */
.bleed{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50% + var(--pad-obj))}
.pins{display:flex;gap:16px;overflow-x:auto;padding-block:16px;scrollbar-width:none}
.pins::-webkit-scrollbar{display:none}
.pin{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;width:56px}
.pin-ring{display:block;position:relative;width:56px;height:56px;border-radius:1000px}
.pin-ring--blue{box-shadow:0 0 0 2px #FFFFFF,0 0 0 4px var(--blue)}
.pin-ring--red{box-shadow:0 0 0 2px #FFFFFF,0 0 0 4px var(--red)}
.pin-badge{position:absolute;top:-4px;right:-4px;min-width:14px;height:18px;padding:0 2px;border-radius:1000px;color:#FFFFFF;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #FFFFFF;box-sizing:content-box}
.pin-name{font-size:12px;color:var(--g07);white-space:nowrap}
.pin-name--on{font-weight:700;color:var(--g09)}
.pin-add{width:56px;height:56px;border-radius:1000px;border:2px dashed var(--g04);color:var(--g06);display:flex;align-items:center;justify-content:center}
.pin-add--blue{border-color:var(--blue);color:var(--blue)}
.pulse{animation:pinPulse 2.4s ease-in-out infinite}
@keyframes pinPulse{0%,100%{opacity:1}50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none;opacity:.7}}

/* 섹션 */
.section{display:flex;flex-direction:column;gap:12px;padding:20px 0 28px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 var(--pad-text)}
.section-title{font-size:17px;font-weight:700}
.count{color:var(--blue)}
.count--muted{color:var(--g06);font-weight:500}
.meta{font-size:12px;color:var(--g06)}
.empty-note{padding:0 var(--pad-text);font-size:14px;color:var(--g06)}

/* 새 공고 카드 */
.cards{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.cards::-webkit-scrollbar{display:none}
/* 한 번에 카드 한 장: 프레임 안쪽 폭 */
.card{position:relative;flex-shrink:0;width:min(calc(100vw - 2 * var(--pad-obj)), var(--card));border-radius:24px;background:var(--g01);padding:16px 16px 6px;display:flex;flex-direction:column;gap:4px;scroll-snap-align:start;scroll-margin-left:max(var(--pad-obj),calc(50vw - var(--frame) / 2 + var(--pad-obj)))}
.card-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;padding:0 72px 0 2px}
.card-name{font-size:15px;font-weight:700;flex-grow:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 등록 시점: 카드 위·오른쪽 끝에서 18px */
.card-when{position:absolute;top:18px;right:18px;font-size:11px;line-height:1;color:var(--g04)}
.card-head + .job{border-top:0}
.job{display:flex;flex-direction:column;gap:6px;padding:12px 2px 6px;border-top:1px solid var(--g03)}
.more{padding:12px 2px;margin-bottom:-6px;border-top:1px solid var(--g03);font-size:13px;line-height:16px;color:var(--g06);text-align:left}
.job-title{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 행 (마감 임박, 진행 중) */
.rows{display:flex;flex-direction:column;gap:12px;padding:0 var(--pad-obj)}
.row{display:flex;align-items:center;gap:12px;border-radius:24px;background:var(--g01);padding:0 16px;min-height:72px}
.row-body{display:flex;flex-direction:column;gap:2px;flex-grow:1;min-width:0}
.row-entity{font-size:12px;color:var(--g07)}
.row-side{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--g06);flex-shrink:0}
.row-side .when{color:var(--g04)}
.dday{font-size:13px;font-weight:700;color:var(--red);background:var(--red-weak);border-radius:16px;padding:4px 10px;flex-shrink:0}

/* 디스클레이머 */
.notice{margin:8px var(--pad-obj) 48px;border-top:1px solid var(--g03);padding:20px 2px 0;display:flex;flex-direction:column}
.notice h2{font-size:14px;font-weight:600;color:var(--g07);margin-bottom:10px}
.notice p{font-size:12px;line-height:1.45;color:var(--g06)}
.notice p + p{margin-top:6px}

/* Empty */
.hero{padding:96px var(--pad-obj) 40px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.hero-icon{width:80px;height:80px;display:block;margin-bottom:8px}
.hero h1{font-size:22px;font-weight:700;line-height:1.35;margin:6px 0 -6px}
.hero p{font-size:15px;line-height:1.55;color:var(--g07)}
.cta{margin-top:20px;width:100%;height:44px;border-radius:16px;background:var(--blue);color:#FFFFFF;font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center}
.caption{font-size:12px;line-height:1.45;color:var(--g06)}

/* Settings / Onboard */
.search{padding:8px var(--pad-obj) 16px}
.search-box{display:flex;align-items:center;gap:8px;height:48px;padding:0 14px;border-radius:16px;background:var(--g02);color:var(--g06)}
.search-box input{flex-grow:1;min-width:0;border:0;background:transparent;font:inherit;font-size:15px;color:var(--g09);outline:none}
.list-head{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:4px var(--pad-text)}
.list-head + .list-head,.list + .list-head{padding-top:16px}
.link-btn{height:44px;font-size:14px;font-weight:600;color:var(--blue)}
.list{padding:0 var(--pad-obj)}
.item{border-bottom:1px solid var(--g02)}
.item-main{display:flex;align-items:center;gap:12px;min-height:64px}
.item-body{display:flex;flex-direction:column;gap:2px;flex-grow:1;min-width:0}
.item-name{font-size:15px;font-weight:700;color:var(--g07)}
.item-name--on{color:var(--g09)}
.chevron{width:36px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--g06);transition:transform .15s}
.chevron[aria-expanded="true"]{transform:rotate(180deg)}
/* 핀 토글: 평범한 체크박스 (누르는 영역 44px) */
.pin-btn{width:44px;height:44px;margin-right:-11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.subs{display:flex;flex-direction:column;padding:0 0 10px 52px}
.sub{display:flex;align-items:center;gap:10px;min-height:44px;text-align:left}
.box{width:22px;height:22px;border-radius:6px;border:2px solid var(--g04);background:#FFFFFF;color:#FFFFFF;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sub[aria-checked="true"] .box,.pin-btn[aria-checked="true"] .box{border:0;background:var(--blue)}
.sub-name{font-size:14px;color:var(--g06)}
.sub[aria-checked="true"] .sub-name{color:var(--g09)}
.suggest{padding:16px var(--pad-text) 32px;display:flex;justify-content:center}
.suggest a{font-size:13px;color:var(--g07);min-height:44px;display:flex;align-items:center;gap:6px}
.suggest span{text-decoration:underline}