:root {
  --ink: #3e2e23;
  --muted: #77695d;
  --paper: #fffdf8;
  --canvas: #f6efe3;
  --line: #dfd2c2;
  --orange: #d96f3f;
  --orange-dark: #b8522d;
  --olive: #7b8341;
  --blue: #4f72b5;
  --shadow: 0 24px 70px rgba(78, 53, 35, 0.12);
  color: var(--ink);
  background: var(--canvas);
  font-family: Pretendard, "Pretendard Variable", "Noto Sans KR", "Apple SD Gothic Neo", Inter, system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 3px solid rgba(79, 114, 181, .32); outline-offset: 3px; }
.skip-link { position:fixed; top:8px; left:8px; z-index:100; padding:10px 14px; transform:translateY(-140%); border-radius:8px; color:#fff; background:var(--ink); font-size:.8rem; font-weight:900; text-decoration:none; }
.skip-link:focus { transform:none; }

.campus-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(114,91,68,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(114,91,68,.055) 1px,transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom,#000,transparent 78%);
  pointer-events: none;
}

.home-shell { width: min(100%, 1040px); min-height: 100vh; margin: 0 auto; padding: 18px 24px 34px; }
.brand-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #cb9a64; border-radius: 50%; color: #7d4c29; background: #f3c67e; box-shadow: inset 0 0 0 4px #ffe7bd; font-family: Georgia,serif; font-weight: 800; }
.brand strong,.brand small { display: block; }
.brand strong { font-size: .82rem; letter-spacing: -.02em; }
.brand small { margin-top: 1px; color: var(--muted); font-size: .55rem; font-weight: 700; letter-spacing: .12em; }
.family-nav { display:flex; align-items:center; gap:5px; }
.family-nav a,.family-nav span { display:inline-flex; min-height:40px; padding:0 10px; border-radius:999px; align-items:center; color:#8e7d6e; font-size:.72rem; font-weight:800; text-decoration:none; }
.family-nav a:hover,.family-nav span[aria-current] { color:var(--ink); background:rgba(255,253,248,.82); }
.family-nav .account-slot { display:contents; }
.family-nav .account-link { border:1px solid var(--line); color:var(--ink); background:rgba(255,253,248,.82); }

.hero { display: grid; grid-template-columns: 1fr 250px; gap: 36px; align-items: center; min-height: 320px; padding: 34px 24px 22px; }
.hero-copy > p { margin: 0 0 11px; color: var(--orange-dark); font-size: .72rem; font-weight: 900; letter-spacing: .08em; }
.hero h1 { margin: 0; font-family: "Iropke Batang","Noto Serif KR",Georgia,serif; font-size: clamp(2.25rem,8vw,3.4rem); font-weight: 800; line-height: 1.07; letter-spacing: -.065em; }
.hero h1 em { position: relative; color: var(--orange); font-style: normal; }
.hero h1 em::after { position: absolute; right: -2px; bottom: 1px; left: 2px; height: 7px; border-radius: 999px; background: rgba(217,111,63,.16); content: ""; }
.hero-copy > span { display: block; margin-top: 17px; color: var(--muted); font-size: .83rem; line-height: 1.65; letter-spacing: -.02em; }
.hero-visual { position: relative; height: 225px; }
.hero-visual img { position: absolute; right: -9px; bottom: 0; width: 205px; height: 205px; object-fit: contain; filter: drop-shadow(0 13px 13px rgba(89,57,30,.15)); }
.morak-halo { position: absolute; right: 8px; bottom: 13px; width: 165px; height: 165px; border-radius: 50%; background: rgba(243,198,126,.42); }
.tape-note { position: absolute; top: 20px; right: 3px; z-index: 2; padding: 8px 10px; transform: rotate(6deg); border: 1px solid #d7c6b5; color: #675445; background: var(--paper); box-shadow: 0 8px 18px rgba(83,58,39,.1); font-size: .65rem; font-weight: 800; line-height: 1.25; }
.tape-note::before { position: absolute; top: -5px; left: 50%; width: 30px; height: 9px; transform: translateX(-50%) rotate(-3deg); background: rgba(232,189,123,.48); content: ""; }

.test-desk { padding-top: 22px; border-top: 1px solid var(--line); }
.test-list { display:grid; grid-template-columns:repeat(2,minmax(320px,1fr)); gap:15px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.section-heading h2 { margin: 0; font-size: .88rem; letter-spacing: -.025em; }
.section-heading span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,253,248,.72); font-size: .61rem; font-weight: 800; }

.test-card { position: relative; display: grid; grid-template-columns: 1fr 112px; gap: 14px; align-items: center; min-height: 190px; overflow: hidden; padding: 21px 20px; border: 1px solid #d8c9ba; border-radius: 22px; background: rgba(255,253,248,.96); box-shadow: 0 14px 34px rgba(78,53,35,.1); text-decoration: none; transition: transform 160ms ease,box-shadow 160ms ease; }
.test-card + .test-card { margin-top: 0; }
.test-card:hover { transform: translateY(-2px); box-shadow: 0 19px 40px rgba(78,53,35,.14); }
.test-card::after { position: absolute; right: 0; bottom: 0; left: 0; height: 5px; content: ""; }
.timetable-card::after { background: var(--orange); }
.opening-card::after { background: var(--blue); }
.card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.card-meta span { padding: 5px 8px; border-radius: 999px; color: #fff; font-size: .62rem; font-weight: 900; }
.timetable-card .card-meta span { background: var(--orange); }
.opening-card .card-meta span { background: var(--blue); }
.card-meta b { color: var(--muted); font-size: .62rem; }
.card-copy h3 { margin: 0; font-family: "Iropke Batang","Noto Serif KR",Georgia,serif; font-size: 1.65rem; line-height: 1.18; letter-spacing: -.055em; }
.card-copy p { margin: 10px 0 15px; color: var(--muted); font-size: .74rem; line-height: 1.6; letter-spacing: -.015em; }
.card-copy > strong { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: .73rem; }
.card-copy > strong i { font-size: 1rem; font-style: normal; transition: transform 160ms ease; }
.test-card:hover .card-copy > strong i { transform: translateX(3px); }

.mini-table { display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,30px); overflow: hidden; transform: rotate(3deg); border: 1px solid #d4c2ad; border-radius: 9px; background: #fffaf1; background-image: linear-gradient(#e5dacb 1px,transparent 1px),linear-gradient(90deg,#e5dacb 1px,transparent 1px); background-size: 33.333% 30px; box-shadow: 0 10px 22px rgba(86,59,38,.12); }
.mini-table i:nth-child(2),.mini-table i:nth-child(6),.mini-table i:nth-child(8) { margin: 3px; border-radius: 3px; background: var(--orange); }
.mini-table i:nth-child(6) { background: var(--olive); }
.mini-table i:nth-child(8) { background: var(--blue); }
.opening-mark { position: relative; padding: 17px 9px 13px; transform: rotate(-3deg); border: 1px solid #c9c0dd; border-radius: 10px; color: #3f4f9c; background: #eef0fb; box-shadow: 0 10px 22px rgba(64,87,214,.1); text-align: center; }
.opening-mark small { display: block; font: 800 .47rem ui-monospace,monospace; letter-spacing: .08em; }
.opening-mark b { display: block; margin: 5px 0 9px; font: 900 2.8rem/.9 Impact,"Arial Narrow",sans-serif; }
.opening-mark i { display: inline-block; width: 22px; height: 6px; margin: 0 1px; border-radius: 999px; background: #6f7fd8; }
.opening-mark i:nth-of-type(2) { background: #f06468; }
.opening-mark i:nth-of-type(3) { background: #248c78; }

footer { display: flex; justify-content: space-between; gap: 14px; margin-top: 27px; padding-top: 16px; border-top: 1px solid rgba(128,103,81,.15); color: #958474; font-size: .58rem; letter-spacing: .03em; }
footer a { font-weight: 800; text-decoration: none; }

@media (max-width: 700px) {
  .home-shell { width:min(100%,560px); padding-right:18px; padding-left:18px; }
  .family-nav a { display:none; }
  .family-nav .account-link { display:inline-flex; }
  .family-nav span { min-height:36px; padding:0 9px; border:1px solid var(--line); background:rgba(255,253,248,.72); font-size:.65rem; }
  .hero { grid-template-columns:1fr 188px; gap:10px; min-height:282px; padding:28px 4px 15px; }
  .test-list { display:block; }
  .test-card + .test-card { margin-top:15px; }
}

@media (max-width: 430px) {
  .home-shell { padding-right: 14px; padding-left: 14px; }
  .hero { grid-template-columns: 1fr 128px; min-height: 250px; padding-top: 20px; }
  .hero h1 { font-size: clamp(2rem,10.6vw,2.7rem); }
  .hero-copy > span { font-size: .75rem; }
  .hero-visual { height: 180px; }
  .hero-visual img { right: -14px; width: 165px; height: 165px; }
  .morak-halo { right: 0; width: 130px; height: 130px; }
  .tape-note { top: 3px; right: -3px; font-size: .58rem; }
  .test-card { grid-template-columns: 1fr 82px; min-height: 178px; padding: 18px 16px; border-radius: 18px; }
  .card-copy h3 { font-size: 1.43rem; }
  .card-copy p { font-size: .69rem; }
  .mini-table { grid-template-rows: repeat(3,23px); background-size: 33.333% 23px; }
  .opening-mark b { font-size: 2.15rem; }
  .opening-mark i { width: 14px; height: 5px; }
}

@media (max-width: 350px) {
  .hero { grid-template-columns: 1fr 106px; }
  .hero h1 { font-size: 1.95rem; }
  .hero-visual img { width: 142px; height: 142px; }
  .test-card { grid-template-columns: 1fr; }
  .mini-table,.opening-mark { display: none; }
}

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