/* ==========================================================================
   KYLA 한국유소년라크로스협회 — 사이트 스타일
   모바일 화면을 먼저 만들고, 넓은 화면에서 배치를 다시 잡습니다.
   ========================================================================== */

:root{
  /* Layout idea: scoresheet-style rows on white, one navy play board in the hero,
     and a single forward slant (taken from the KYLA letterforms) wherever two colour fields meet. */
  --ink:#14213F;          /* 로고의 남색: 글자와 선 */
  --deep:#06162E;         /* 작전판과 푸터 바탕 */
  --paper:#FFFFFF;
  --tint:#F1F4F9;         /* 옅은 바탕 */
  --line:#D5DCE8;
  --muted:#56627A;
  --red:#D0111B;          /* K: 대회, 주요 버튼 */
  --orange:#E77E11;       /* Y: 유소년 교육 */
  --green:#187A36;        /* L: 지도자 자격 (흰 글자 대비를 위해 로고보다 깊게) */
  --blue:#176BA9;         /* A: 국제교류 */
  --green-bright:#29A04C; /* 로고 원색 */
  --blue-bright:#1D7EC3;
  --ball:#EEB81C;         /* 공 */

  --font-ko:"Gothic A1","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Noto Sans CJK KR",sans-serif;
  --font-num:"Kanit","Gothic A1","Apple SD Gothic Neo","Malgun Gothic",sans-serif;

  --gutter:20px;
  --wrap:1180px;
  --hdr:60px;
  --tab:58px;
  --cut:28px;             /* 색면이 만나는 사선의 높이 */
  color-scheme:light;
}

/* ---------- 기본 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-ko);font-size:16px;line-height:1.7;letter-spacing:-0.012em;
  word-break:keep-all;overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom));
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{border:0;padding:0;min-width:0}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--blue-bright);outline-offset:3px}
[hidden]{display:none !important}
[tabindex="-1"]:focus{outline:none}
main{display:block;overflow-x:clip}
@supports not (overflow-x:clip){main{overflow-x:hidden}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--ink);color:#fff;padding:12px 16px;font-weight:700;text-decoration:none}
.skip:focus{top:calc(8px + env(safe-area-inset-top))}

.wrap{
  width:100%;max-width:calc(var(--wrap) + var(--gutter) * 2);margin-inline:auto;
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right));
}

.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}

/* 화면 전환 */
.js .view{display:none}
.js .view.is-active{display:block;animation:view-in .22s ease-out}
@keyframes view-in{from{opacity:.55}to{opacity:1}}

/* ---------- 글자 ---------- */
.t-page{font-weight:900;font-size:clamp(34px,9.4vw,64px);line-height:1.14;letter-spacing:-0.045em}
.t-2{font-weight:900;font-size:clamp(26px,6.6vw,40px);line-height:1.22;letter-spacing:-0.04em;text-wrap:balance}
.t-3{font-weight:900;font-size:20px;line-height:1.35;letter-spacing:-0.03em}
.lead{font-size:17px;line-height:1.7;font-weight:500;max-width:34em}
.oblique{display:inline-block;transform:skewX(-8deg);transform-origin:0 100%}
.num{font-family:var(--font-num);font-style:italic;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:0}

.prose{max-width:36em}
.prose > * + *{margin-top:1em}
.prose > h3{margin-top:1.8em}
.prose ul{list-style:none}
.prose li{position:relative;padding-left:20px}
.prose li + li{margin-top:.4em}
.prose li::before{content:"";position:absolute;left:2px;top:.72em;width:9px;height:3px;background:currentColor;transform:skewX(-14deg)}
.prose a{font-weight:700;text-underline-offset:3px}

/* ---------- 버튼, 표식 ---------- */
.btn{
  position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:0 26px;border:0;background:none;
  font-weight:900;font-size:16px;line-height:1.2;letter-spacing:-0.02em;color:#fff;text-decoration:none;text-align:center;
}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--red);transform:skewX(-14deg);transition:background-color .15s}
.btn:hover::before{background:var(--ink)}
.btn--ghost{color:var(--ink)}
.btn--ghost::before{background:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
.btn--ghost:hover{color:#fff}
.btn--light{color:var(--ink)}
.btn--light::before{background:#fff}
.btn--light:hover{color:#fff}
.btn--ink::before{background:var(--ink)}
.btn--ink:hover::before{background:var(--red)}
.btn--sm{min-height:42px;padding:0 18px;font-size:15px}
.btn[disabled],.btn[aria-disabled="true"]{color:#fff;cursor:not-allowed}
.btn[disabled]::before,.btn[aria-disabled="true"]::before{background:#8B95A8}
.btns{display:flex;flex-wrap:wrap;gap:14px 22px;padding-inline:7px}

.bib{position:relative;z-index:0;display:inline-block;padding:2px 10px;font-size:12.5px;font-weight:900;line-height:1.5;color:#fff;white-space:nowrap}
.bib::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bib,var(--ink));transform:skewX(-14deg)}
.bib--red{--bib:var(--red)}
.bib--orange{--bib:var(--orange);color:var(--ink)}
.bib--green{--bib:var(--green)}
.bib--blue{--bib:var(--blue)}
.bib--navy{--bib:var(--ink)}
.bib--line{color:var(--ink)}
.bib--line::before{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}

.more{display:inline-flex;align-items:center;gap:2px;font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap}
.more:hover{text-decoration:underline;text-underline-offset:4px}
.more .ico{width:18px;height:18px}
.extlink{display:inline-flex;align-items:center;gap:4px;font-weight:700;text-underline-offset:3px}
.extlink .ico{width:16px;height:16px}

/* ---------- 머리 ---------- */
.hdr{position:sticky;top:0;z-index:50;background:#fff;padding-top:env(safe-area-inset-top)}
.hdr::after{content:"";display:block;height:4px;background:linear-gradient(104deg,var(--red) 0 25%,var(--orange) 25% 50%,var(--green-bright) 50% 75%,var(--blue-bright) 75% 100%)}
.hdr__in{display:flex;align-items:center;gap:10px;height:var(--hdr)}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;text-decoration:none}
.brand__mark{height:28px;width:auto}
.brand__name{font-weight:900;font-size:12px;line-height:1.25;letter-spacing:-0.035em}
.nav,.hdr__cta,.hdr__en{display:none}
.hdr__menu{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 2px 0 10px;border:0;background:none;font-weight:700;font-size:15px}
.hdr__menu .ico{width:24px;height:24px}

.mnav{position:fixed;left:0;right:0;bottom:0;top:calc(var(--hdr) + 4px + env(safe-area-inset-top));z-index:49;background:#fff;overflow-y:auto;padding:4px 0 calc(28px + env(safe-area-inset-bottom))}
.mnav__link{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px max(var(--gutter),env(safe-area-inset-right)) 15px max(var(--gutter),env(safe-area-inset-left));font-weight:900;font-size:22px;letter-spacing:-0.04em;text-decoration:none;border-bottom:1px solid var(--line)}
.mnav__link[aria-current="page"]{color:var(--red)}
.mnav__foot{display:flex;flex-wrap:wrap;gap:8px 20px;padding:20px var(--gutter) 0;font-size:15px;font-weight:700}
body.menu-open{overflow:hidden}

/* 모바일 아래 탭 */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:var(--tab);font-size:11.5px;font-weight:700;color:var(--muted);text-decoration:none}
.tabbar .ico{width:23px;height:23px}
.tabbar a[aria-current="page"]{color:var(--ink);font-weight:900}
.tabbar a[aria-current="page"]::before{content:"";position:absolute;top:-1px;left:22%;right:22%;height:3px;background:var(--red);transform:skewX(-14deg)}

/* ---------- 홈: 히어로 ---------- */
.hero__copy{padding:34px max(var(--gutter),env(safe-area-inset-right)) 46px max(var(--gutter),env(safe-area-inset-left))}
.hero__title{font-weight:900;font-size:min(11.2vw,52px);line-height:1.16;letter-spacing:-0.045em}
.hero__title .oblique > span{display:block}
.hero__lead{margin-top:20px;font-size:17px;line-height:1.65;font-weight:500;max-width:29em}
.hero__copy .btns{margin-top:28px}

.board{position:relative;height:476px;background:var(--deep);color:#fff;clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%);--play-top:64px;--play-bottom:104px;--play-left:0px}
.board canvas{position:absolute;inset:0;width:100%;height:100%}
.board__legend{position:absolute;left:max(var(--gutter),env(safe-area-inset-left));top:40px;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:rgba(255,255,255,.78)}
.lg{display:inline-block;width:24px;height:0;border-top:2.5px solid rgba(255,255,255,.85)}
.lg--pass{border-top-style:dashed;margin-left:10px}

.ticket{position:absolute;left:max(var(--gutter),env(safe-area-inset-left));right:max(var(--gutter),env(safe-area-inset-right));bottom:20px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:13px 14px 13px 18px;background:#fff;color:var(--ink);text-decoration:none;box-shadow:inset 5px 0 0 var(--red)}
.ticket__date{font-size:28px;line-height:1}
.ticket__label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);line-height:1.3}
.ticket__title{display:block;font-weight:900;font-size:16px;line-height:1.35;letter-spacing:-0.03em}
.ticket:hover .ticket__title{text-decoration:underline;text-underline-offset:3px}

/* ---------- 구역 ---------- */
.band{padding:56px 0}
.band--tint{background:var(--tint)}
.band--tight{padding:40px 0}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.secintro{margin-top:12px}

.bulletin{display:grid;gap:56px}

/* 기록지 줄 */
.rows{border-top:2px solid var(--ink)}
.rows__year{margin:28px 0 8px;font-size:15px;color:var(--muted)}
.rows__year:first-child{margin-top:0}
.row{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:start;gap:4px 14px;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none}
.row__date{font-size:22px;line-height:1.25;padding-top:1px}
.row__date small{display:block;font-family:var(--font-ko);font-style:normal;font-weight:700;font-size:12px;color:var(--muted);letter-spacing:-0.01em;margin-top:2px}
.row__date.row__date--none{font-family:var(--font-ko);font-style:normal;font-weight:700;font-size:14px;line-height:1.4;color:var(--muted);padding-top:3px}
.row__main{display:grid;gap:5px;justify-items:start;min-width:0}
.row__title{font-weight:700;font-size:17px;line-height:1.42;letter-spacing:-0.025em}
.row__sub{font-size:14.5px;line-height:1.55;color:var(--muted)}
.row__end{align-self:center;display:flex;align-items:center;gap:8px}
.row > .ico{align-self:center;color:var(--muted)}
a.row:hover .row__title{text-decoration:underline;text-underline-offset:3px}
a.row:hover .ico{color:var(--red)}

.empty{padding:22px 0 24px;border-top:2px solid var(--ink);border-bottom:1px solid var(--line)}
.empty__title{font-weight:900;font-size:18px;letter-spacing:-0.03em}
.empty__text{margin-top:6px;color:var(--muted);font-size:15px;max-width:32em}
.minihead{margin:28px 0 8px;font-weight:900;font-size:15px}

/* ---------- 홈: 하는 일 ---------- */
.pillars{display:flex;flex-direction:column;margin-top:28px;overflow:hidden}
.pillar{position:relative;isolation:isolate;display:block;padding:40px max(var(--gutter),env(safe-area-inset-right)) 42px max(var(--gutter),env(safe-area-inset-left));background:var(--tone);color:#fff;text-decoration:none;overflow:hidden}
.pillar + .pillar{margin-top:calc(var(--cut) * -1);padding-top:calc(40px + var(--cut));clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%)}
.pillar--orange{--tone:var(--orange);color:var(--ink)}
.pillar--red{--tone:var(--red)}
.pillar--green{--tone:var(--green)}
.pillar--blue{--tone:var(--blue)}
.pillar__title{font-weight:900;font-size:28px;line-height:1.2;letter-spacing:-0.045em}
.pillar__text{margin-top:10px;max-width:23em;font-size:16px;line-height:1.62;font-weight:500}
.pillar__go{display:inline-flex;align-items:center;gap:2px;margin-top:16px;font-weight:900;font-size:15px;text-decoration:underline;text-underline-offset:4px}
.pillar__fig{position:absolute;right:-6px;bottom:-4px;z-index:-1;width:176px;height:auto;opacity:.5;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.pillar__fig .solid{fill:currentColor;stroke:none}
.pillar__fig .ball{fill:var(--ball);stroke:none}
.pillar--orange .pillar__fig .ball{fill:#fff}

/* ---------- 홈: 2026 기록, 설문 ---------- */
.record{display:grid;gap:28px}
.survey{display:grid;gap:18px;padding:26px 22px;background:var(--deep);color:#fff}
.survey__marks{display:grid;grid-template-columns:repeat(7,20px);gap:8px 10px;padding-left:4px}
.survey__marks i{width:20px;height:28px;background:var(--green-bright);transform:skewX(-14deg)}
.survey__marks i.is-off{background:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.survey__say{font-weight:900;font-size:21px;line-height:1.42;letter-spacing:-0.035em;max-width:17em}
.survey__note{margin-top:8px;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.72)}
.survey .more{margin-top:14px;color:#fff}

/* ---------- 홈: 국제교류 띠 ---------- */
.intl{position:relative;margin-top:calc(var(--cut) * -1);padding:calc(64px + var(--cut)) 0 68px;background:var(--blue);color:#fff;clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%)}
.intl__title{font-family:var(--font-num);font-style:italic;font-weight:800;font-size:clamp(36px,10vw,78px);line-height:1.02;letter-spacing:-0.012em;max-width:10.5em;text-wrap:balance}
.intl__text{margin-top:20px;font-family:var(--font-num);font-size:18px;line-height:1.55;max-width:31em;letter-spacing:0}
.intl__ko{margin-top:10px;font-weight:500;color:rgba(255,255,255,.86)}
.intl .btns{margin-top:28px}

/* 방문 목적별 안내 */
.ways .row{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:18px 0}
.ways__who{font-weight:900;font-size:19px;letter-spacing:-0.035em}
.ways__what{display:block;margin-top:2px;font-size:15px;color:var(--muted)}

/* ---------- 하위 화면 머리 ---------- */
.pagehead{position:relative;isolation:isolate;padding:44px 0 calc(48px + var(--cut));background:var(--tone,var(--ink));color:var(--on,#fff);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),0 100%);overflow:hidden}
.pagehead[data-tone="orange"]{--tone:var(--orange);--on:var(--ink);--mesh:rgba(20,33,63,.16)}
.pagehead[data-tone="red"]{--tone:var(--red)}
.pagehead[data-tone="green"]{--tone:var(--green)}
.pagehead[data-tone="blue"]{--tone:var(--blue)}
.pagehead::after{
  content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;width:62%;
  background:
    repeating-linear-gradient(60deg,transparent 0 22px,var(--mesh,rgba(255,255,255,.17)) 22px 24px),
    repeating-linear-gradient(-60deg,transparent 0 22px,var(--mesh,rgba(255,255,255,.17)) 22px 24px);
  -webkit-mask-image:linear-gradient(100deg,transparent 8%,#000 78%);mask-image:linear-gradient(100deg,transparent 8%,#000 78%);
}
.pagehead__lead{margin-top:18px;font-size:17px;line-height:1.65;font-weight:500;max-width:31em}
.pagehead__lead strong{display:block;font-weight:900;font-size:20px;line-height:1.4;letter-spacing:-0.035em;margin-bottom:6px}

.plainhead{padding-top:36px;padding-bottom:22px}
.plainhead__lead{margin-top:10px;color:var(--muted);max-width:34em}

.subnav{position:sticky;top:calc(var(--hdr) + 4px + env(safe-area-inset-top));z-index:20;margin-top:calc(var(--cut) * -1 + 4px);background:#fff;border-bottom:1px solid var(--line)}
.subnav__in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-block:6px}
.subnav__in::-webkit-scrollbar{display:none}
.subnav button{flex:none;min-height:40px;padding:0 12px;border:0;background:none;font-weight:700;font-size:15px;white-space:nowrap}
.subnav button:hover{color:var(--red)}

.sect{padding:44px 0;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--hdr) + 60px)}
.sect:last-of-type{border-bottom:0}
.sect__grid{display:grid;gap:22px}
.sect__body > * + *{margin-top:22px}

/* 정의 표 */
.facts{border-top:2px solid var(--ink)}
.facts > div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.facts dt{font-weight:900;font-size:15px}
.facts dd{font-size:16px;line-height:1.6}
.facts dd small{display:block;font-size:13.5px;color:var(--muted)}
.facts--wide > div{grid-template-columns:118px minmax(0,1fr)}

.pair{display:grid;gap:14px}
.pair__item{padding:22px 20px 24px;background:var(--tint);box-shadow:inset 0 4px 0 var(--ink)}
.pair__item h3{font-weight:900;font-size:15px}
.pair__item p{margin-top:8px;font-weight:700;font-size:18px;line-height:1.55;letter-spacing:-0.03em}

.values > div{grid-template-columns:104px minmax(0,1fr)}
.values dt{font-size:19px;letter-spacing:-0.035em;line-height:1.3}
.values dt span{display:block;font-family:var(--font-num);font-style:italic;font-weight:600;font-size:13.5px;color:var(--muted);letter-spacing:0}
.values dd strong{display:block;font-weight:700}
.values dd span{display:block;font-size:14.5px;color:var(--muted)}

.people{display:grid;gap:26px}
.person{padding-top:14px;border-top:2px solid var(--ink)}
.person__role{font-weight:700;font-size:14px;color:var(--muted)}
.person__name{margin-top:2px;font-weight:900;font-size:24px;letter-spacing:-0.04em;line-height:1.3}
.person__facts{margin-top:10px;font-size:15px;line-height:1.6}
.person__facts li{position:relative;padding-left:16px}
.person__facts li + li{margin-top:3px}
.person__facts li::before{content:"";position:absolute;left:1px;top:.74em;width:8px;height:2.5px;background:var(--ink);transform:skewX(-14deg)}

.note{padding:16px 18px;background:var(--tint);box-shadow:inset 4px 0 0 var(--ink);font-size:15px;line-height:1.65}
.note--warn{box-shadow:inset 4px 0 0 var(--orange)}
.note strong{font-weight:900}
.note > * + *{margin-top:6px}

.quote{padding:26px 22px 28px;background:var(--deep);color:#fff}
.quote p{font-weight:900;font-size:21px;line-height:1.5;letter-spacing:-0.035em;max-width:22em}
.quote small{display:block;margin-top:14px;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.78);max-width:36em}

.steps{counter-reset:step;border-top:2px solid var(--ink)}
.steps li{counter-increment:step;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);font-weight:700;font-size:17px}
.steps li::before{content:counter(step);font-family:var(--font-num);font-style:italic;font-weight:800;font-size:24px;line-height:1}
.steps li span{display:block;font-weight:400;font-size:14.5px;color:var(--muted)}

.ages > div{grid-template-columns:78px minmax(0,1fr)}
.ages dt{font-family:var(--font-num);font-style:italic;font-weight:800;font-size:22px;line-height:1.3;letter-spacing:0}

.tablewrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;border-top:2px solid var(--ink);font-size:15.5px}
.tbl th,.tbl td{padding:12px 12px 12px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.55}
.tbl thead th{font-size:13.5px;color:var(--muted);font-weight:700}
.tbl tbody th{font-weight:900;white-space:nowrap;width:1%;padding-right:20px}

.cta{display:grid;gap:18px;padding:28px 22px 30px;background:var(--tint)}
.cta h2{font-weight:900;font-size:22px;line-height:1.35;letter-spacing:-0.035em}
.cta p{color:var(--muted);max-width:32em}

/* 과목 */
.subjects{display:grid;gap:0;border-top:2px solid var(--ink)}
.subject{padding:18px 0;border-bottom:1px solid var(--line)}
.subject h3{font-weight:900;font-size:18px;letter-spacing:-0.03em}
.subject ul{margin-top:8px;font-size:15px;color:var(--muted);line-height:1.6}
.subject li + li{margin-top:2px}

/* ---------- 일정, 대회 기록 ---------- */
.season{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:var(--line);border:1px solid var(--line)}
.season > div{padding:16px 14px 18px;background:#fff}
.season dt{font-weight:900;font-size:15px}
.season dd{margin-top:4px;font-weight:700;font-size:17px;line-height:1.4;letter-spacing:-0.03em}

.back{display:inline-flex;align-items:center;gap:2px;min-height:44px;font-weight:700;font-size:15px;text-decoration:none}
.back:hover{text-decoration:underline;text-underline-offset:4px}
.detail{padding-top:14px;padding-bottom:64px}
.detail__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px;font-weight:700;font-size:15px;color:var(--muted)}
.detail__title{margin-top:12px;font-weight:900;font-size:clamp(28px,7.4vw,46px);line-height:1.22;letter-spacing:-0.045em;max-width:17em;text-wrap:balance}
.detail__en{margin-top:8px;font-family:var(--font-num);font-style:italic;font-weight:600;font-size:17px;color:var(--muted);letter-spacing:0}
.detail__body{margin-top:28px;max-width:980px}
.detail__body > * + *{margin-top:28px}
.detail h2{font-weight:900;font-size:22px;letter-spacing:-0.035em;margin-bottom:12px}
.twocol{display:grid;gap:28px}
.ticks li{position:relative;padding:11px 0 11px 22px;border-bottom:1px solid var(--line);line-height:1.55}
.ticks{border-top:2px solid var(--ink)}
.ticks li::before{content:"";position:absolute;left:2px;top:1.15em;width:10px;height:3px;background:var(--tick,var(--ink));transform:skewX(-14deg)}
.ticks--green{--tick:var(--green-bright)}
.ticks--orange{--tick:var(--orange)}
.pager{display:grid;gap:0;margin-top:44px;border-top:2px solid var(--ink)}
.pager a{display:grid;gap:2px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none}
.pager small{font-size:13px;font-weight:700;color:var(--muted)}
.pager span{font-weight:700}
.pager a:hover span{text-decoration:underline;text-underline-offset:3px}

/* 공지 분류 */
.filters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:18px;padding:2px 6px}
.filters::-webkit-scrollbar{display:none}
.filter{position:relative;z-index:0;flex:none;min-height:40px;padding:0 16px;border:0;background:none;font-weight:700;font-size:15px;color:var(--ink)}
.filter::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);transform:skewX(-14deg)}
.filter[aria-pressed="true"]{color:#fff;font-weight:900}
.filter[aria-pressed="true"]::before{background:var(--ink);box-shadow:none}

/* ---------- 사진 ---------- */
.albums{display:grid;gap:26px}
.album{display:block;text-decoration:none}
.album__cover{position:relative;isolation:isolate;aspect-ratio:16/10;background:var(--tone,var(--ink));color:#fff;overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),0 100%)}
.album__cover::after{content:"";position:absolute;inset:0;z-index:-1;background:
  repeating-linear-gradient(60deg,transparent 0 22px,rgba(255,255,255,.16) 22px 24px),
  repeating-linear-gradient(-60deg,transparent 0 22px,rgba(255,255,255,.16) 22px 24px)}
.album__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.album__date{position:absolute;left:18px;bottom:30px;font-size:44px;line-height:1}
.album__state{position:absolute;right:16px;top:14px}
.album[data-tone="red"] .album__cover{--tone:var(--red)}
.album[data-tone="orange"] .album__cover{--tone:var(--orange);color:var(--ink)}
.album[data-tone="green"] .album__cover{--tone:var(--green)}
.album[data-tone="blue"] .album__cover{--tone:var(--blue)}
.album__title{margin-top:8px;font-weight:900;font-size:19px;line-height:1.4;letter-spacing:-0.035em}
.album__sub{font-size:14.5px;color:var(--muted)}
.album:hover .album__title{text-decoration:underline;text-underline-offset:3px}
.photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.photos button{padding:0;border:0;background:var(--tint);aspect-ratio:1}
.photos img{width:100%;height:100%;object-fit:cover}

.lb{position:fixed;inset:0;z-index:90;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:rgba(6,22,46,.97);color:#fff;padding:calc(10px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom))}
.lb__bar{display:flex;justify-content:space-between;align-items:center;font-weight:700}
.lb__img{align-self:center;justify-self:center;max-width:100%;max-height:100%;object-fit:contain}
.lb__nav{display:flex;justify-content:center;gap:16px}
.lb button{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;border:0;background:none;color:#fff}

/* ---------- 신청·문의 ---------- */
.tabs{display:flex;gap:0;border-bottom:2px solid var(--ink)}
.tab{flex:1 1 0;min-width:0;min-height:50px;padding:0 6px;border:0;background:none;font-weight:700;font-size:16px;color:var(--muted);white-space:nowrap}
.tab[aria-selected="true"]{background:var(--ink);color:#fff;font-weight:900}
.panel{padding-top:28px;padding-bottom:64px}
.panel > * + *{margin-top:26px}
.panel > [hidden] + *{margin-top:0}
.panel--flush{padding-top:8px}
.narrow{max-width:760px}

.form{display:grid;gap:30px;max-width:680px}
.form__group{display:grid;gap:16px}
.form__legend{padding:0 0 8px;width:100%;border-bottom:2px solid var(--ink);font-weight:900;font-size:18px;letter-spacing:-0.03em}
.form__grid{display:grid;gap:16px}
.field{display:grid;gap:6px;align-content:start}
.field__label{font-weight:700;font-size:15px}
.field__label em{font-style:normal;font-weight:700;color:var(--red);margin-left:3px}
.field__hint{font-size:13.5px;color:var(--muted);line-height:1.5}
.field__err{font-size:14px;font-weight:700;color:var(--red)}
.input{width:100%;min-height:50px;padding:11px 14px;border:1.5px solid #8F9BB0;border-radius:4px;background:#fff;font-size:16px;line-height:1.5;color:var(--ink)}
textarea.input{min-height:128px;resize:vertical}
select.input{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314213F' stroke-width='2.4'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
.input:focus-visible{outline:3px solid var(--blue-bright);outline-offset:1px;border-color:var(--ink)}
.input[aria-invalid="true"]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.input:disabled{background:var(--tint);color:var(--muted)}
.check{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start;font-size:15.5px;line-height:1.55}
.check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--ink)}
.checks{display:flex;flex-wrap:wrap;gap:10px 22px}
.checks .check{grid-template-columns:24px auto}
.consent{font-size:14px;line-height:1.65;color:var(--muted);padding:14px 16px;background:var(--tint)}
.consent dt{font-weight:900;color:var(--ink)}
.consent dd + dt{margin-top:8px}

.roster{display:grid;gap:10px}
.roster__row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 68px 44px;gap:8px;align-items:end}
.roster__row .field__label{font-size:13px}
.roster__row:not(:first-child) .field__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.roster__del{display:inline-flex;align-items:center;justify-content:center;width:44px;height:50px;border:0;background:none;color:var(--muted)}
.roster__del:hover{color:var(--red)}
.linkbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;font-weight:900;font-size:15px;text-decoration:underline;text-underline-offset:4px}

.result{padding:18px 18px 20px;background:var(--tint);box-shadow:inset 4px 0 0 var(--ink)}
.result--ok{box-shadow:inset 4px 0 0 var(--green-bright)}
.result--err{box-shadow:inset 4px 0 0 var(--red)}
.result__title{font-weight:900;font-size:17px}
.result__text{margin-top:4px;font-size:15px}
.result pre{margin:12px 0 0;padding:12px 14px;background:#fff;border:1px solid var(--line);font:inherit;font-size:14px;line-height:1.6;white-space:pre-wrap;max-height:240px;overflow:auto}
.result__acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;margin-top:8px}
.note .extlink{vertical-align:bottom}

/* ---------- 영문 화면 ---------- */
.en{font-family:var(--font-num);letter-spacing:0;word-break:normal;overflow-wrap:break-word}
.en .t-2,.en .t-page{font-family:var(--font-num);font-style:italic;font-weight:800;letter-spacing:-0.01em}
.en .t-page .oblique{transform:none}
.en .lead,.en .prose{font-size:17.5px;line-height:1.6}
.en .field__label,.en .form__legend,.en .tbl tbody th,.en .facts dt{font-weight:600}
.en .btn{font-family:var(--font-num);font-weight:600;font-size:17px}
.en [lang="ko"]{font-family:var(--font-ko);letter-spacing:-0.012em;word-break:keep-all;font-size:15px}
.ways-en{border-top:2px solid var(--ink)}
.ways-en > div{display:grid;gap:2px;padding:15px 0;border-bottom:1px solid var(--line)}
.ways-en dt{font-weight:600;font-size:19px;line-height:1.3}
.ways-en dd{color:var(--muted);line-height:1.55}

/* ---------- 바닥 ---------- */
.ftr{background:var(--deep);color:rgba(255,255,255,.82);padding:48px 0 40px;font-size:14.5px;line-height:1.7}
.ftr__in{display:grid;gap:32px}
.ftr__brand{display:flex;align-items:center;gap:16px}
.ftr__brand img{width:84px;height:auto}
.ftr__brand strong{display:block;color:#fff;font-weight:900;font-size:19px;letter-spacing:-0.035em;line-height:1.3}
.ftr__brand span{font-family:var(--font-num);font-size:14px;letter-spacing:0}
.ftr__nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 20px}
.ftr__nav a{display:block;padding:7px 0;color:#fff;font-weight:700;text-decoration:none}
.ftr__nav a:hover{text-decoration:underline;text-underline-offset:4px}
.ftr__info > * + *{margin-top:8px}
.ftr__info a{color:#fff;font-weight:700;text-underline-offset:3px}
.ftr__links{display:flex;flex-wrap:wrap;gap:6px 20px}
.ftr__small{font-size:13px;color:rgba(255,255,255,.62)}

/* ==========================================================================
   넓은 화면
   ========================================================================== */
@media (min-width:640px){
  .pair{grid-template-columns:repeat(2,minmax(0,1fr))}
  .people{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 28px}
  .albums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .photos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .form__grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .season{grid-template-columns:repeat(4,minmax(0,1fr))}
  .twocol{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
  .facts > div,.values > div{grid-template-columns:150px minmax(0,1fr)}
  .survey{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:32px;padding:32px 34px}
  .board{height:520px}
  .ticket{left:auto;width:400px}
}

@media (min-width:900px){
  :root{--gutter:40px;--cut:44px;--hdr:68px}
  body{font-size:17px;padding-bottom:0}
  .tabbar{display:none}
  .band{padding:96px 0}
  .band--tight{padding:64px 0}
  .brand__mark{height:34px}
  .brand__name{font-size:13px}
  .lead,.pagehead__lead,.hero__lead{font-size:18.5px}
  .row{grid-template-columns:78px minmax(0,1fr) auto;padding:18px 0}
  .row__date{font-size:26px}
  .row__title{font-size:18.5px}
  .bulletin{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px}
  .record{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px 72px;align-items:start}
  .record__wide{grid-column:1 / -1}
  .pagehead{padding:72px 0 calc(76px + var(--cut))}
  .plainhead{padding-top:64px;padding-bottom:28px}
  .sect{padding:72px 0}
  .sect__grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px}
  .people{grid-template-columns:repeat(3,minmax(0,1fr))}
  .albums{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px}
  .photos{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .cta{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px;padding:40px 44px}
  .ftr{padding:72px 0 56px}
  .ftr__in{grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:56px}
  .ftr__brand{align-items:flex-start;flex-direction:column}
  .ftr__brand img{width:108px}
  .detail{padding-top:24px;padding-bottom:96px}
  .panel{padding-top:40px;padding-bottom:96px}
  .intl{padding:calc(96px + var(--cut)) 0 104px}
  .survey__say{font-size:26px}
  .quote{padding:40px 44px 44px}
  .quote p{font-size:26px}
  .pager{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
}

@media (min-width:1000px){
  /* 히어로: 왼쪽 글, 오른쪽 작전판이 화면 끝까지 */
  .hero{display:grid;grid-template-columns:minmax(40px,1fr) minmax(0,640px) minmax(0,540px) minmax(0,1fr)}
  .hero__copy{grid-column:2;align-self:center;padding:84px 40px 96px 0}
  .hero__title{font-size:clamp(48px,5.4vw,78px)}
  .board{grid-column:3 / 5;height:auto;min-height:640px;clip-path:polygon(112px 0,100% 0,100% 100%,0 100%);--play-top:30px;--play-bottom:132px;--play-left:104px}
  .board__legend{left:40px;top:auto;bottom:56px}
  .ticket{left:auto;right:40px;bottom:36px;width:min(400px,calc(100% - 230px))}

  /* 하는 일: 네 장의 사선 판 */
  .pillars{flex-direction:row;margin-top:44px;--s:76px}
  .pillars .pillar{flex:1 1 0;min-height:460px;margin:0 0 0 calc(var(--s) * -1);padding:60px 44px 56px calc(var(--s) + 30px);clip-path:polygon(var(--s) 0,100% 0,calc(100% - var(--s)) 100%,0 100%);transition:flex-grow .3s ease}
  .pillars .pillar:first-child{margin-left:0;padding-left:max(40px,calc((100vw - 1260px) / 2 + 40px));clip-path:polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%)}
  .pillars .pillar:last-child{clip-path:polygon(var(--s) 0,100% 0,100% 100%,0 100%)}
  .pillars .pillar:hover,.pillars .pillar:focus-visible{flex-grow:1.22}
  .pillar__title{font-size:32px}
  .pillar__text{max-width:15.5em}
  .pillar__fig{right:auto;left:calc(var(--s) * .35);bottom:24px;width:210px}
  .pillars .pillar:first-child .pillar__fig{left:max(20px,calc((100vw - 1260px) / 2 + 20px))}
  .pillars .pillar__text{min-height:8.2em}
}

@media (min-width:1100px){
  .nav{display:flex;gap:2px;margin-right:8px}
  .nav a{position:relative;padding:10px 11px;font-weight:700;font-size:15.5px;letter-spacing:-0.03em;text-decoration:none;white-space:nowrap}
  .nav a:hover{color:var(--red)}
  .nav a[aria-current="page"]{font-weight:900}
  .nav a[aria-current="page"]::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:3px;background:var(--red);transform:skewX(-14deg)}
  .hdr__menu{display:none}
  .hdr__en{display:inline-flex;align-items:center;min-height:42px;padding:0 10px;font-family:var(--font-num);font-weight:600;font-size:15px;letter-spacing:0;text-decoration:none}
  .hdr__en:hover{color:var(--red)}
  .hdr__cta{display:inline-flex;margin-left:8px;margin-right:6px}
  .mnav{display:none !important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

@media print{
  .hdr,.tabbar,.mnav,.subnav,.ftr__nav{display:none !important}
  body{padding-bottom:0}
}