/* 교실 환경판: 하늘색 색상지 바탕, 노란 물결 테두리, 압정으로 꽂은 종이.
   색은 site.json "color" 에서 :root 로 들어온다 (board, trim, paper, memo, pin, ink, deep). */
@font-face { font-family:"GmarketSans"; font-weight:700; font-display:swap;
  src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff") format("woff"); }
@font-face { font-family:"GmarketSans"; font-weight:500; font-display:swap;
  src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff"); }

* { box-sizing:border-box; }
html { scrollbar-color:var(--deep) var(--board); }
body { margin:0; background:var(--board); color:var(--ink); font-family:"Pretendard","Malgun Gothic",sans-serif;
  font-size:17px; line-height:1.7; word-break:keep-all; -webkit-font-smoothing:antialiased; }
::selection { background:var(--trim); color:var(--ink); }
a { color:inherit; text-underline-offset:.2em; }
img { max-width:100%; display:block; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid var(--trim); outline-offset:3px; border-radius:2px; }
.wrap { max-width:1200px; margin:0 auto; padding:0 30px; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:16px; top:16px; z-index:99; background:#fff; padding:8px 12px; }
h1, h2, h3, .display { font-family:"GmarketSans","Pretendard",sans-serif; font-weight:700; line-height:1.2; letter-spacing:-.02em; margin:0; }
h2 { font-size:clamp(26px,3.2vw,38px); }
h3 { font-size:21px; }
p { margin:0; }

/* 노란 물결 테두리: 게시판 맨 위 */
body::before { content:""; display:block; height:22px; background:
  radial-gradient(circle at 12px 0, var(--trim) 11px, transparent 12px) 0 8px/24px 14px repeat-x,
  linear-gradient(var(--trim), var(--trim)) 0 0/100% 9px no-repeat; }

/* 머리띠: 흰 종이 띠 */
.strip { position:sticky; top:0; z-index:20; padding:10px 0; background:var(--board); }
.strip .wrap { display:flex; align-items:center; gap:20px; background:var(--paper); min-height:64px; padding:0 20px;
  box-shadow:0 1px 2px rgba(0,30,60,.18), 0 8px 18px -10px rgba(0,30,60,.45); }
.brand img { height:var(--logo-h,28px); width:auto; }
.strip nav { display:flex; gap:22px; margin-left:auto; font-size:16px; }
.strip nav a { text-decoration:none; padding:6px 0; border-bottom:3px solid transparent; }
.strip nav a:hover, .strip nav a[aria-current] { border-color:var(--board); }
.call { display:inline-flex; align-items:center; gap:6px; background:var(--ink); color:#fff; text-decoration:none;
  font-family:"GmarketSans",sans-serif; font-weight:500; font-size:15px; padding:9px 14px; white-space:nowrap; }
.call svg { width:15px; height:15px; fill:currentColor; }

/* 종이·압정 */
.note { position:relative; background:var(--paper); padding:28px 28px 26px;
  box-shadow:0 1px 2px rgba(0,30,60,.2), 0 14px 28px -14px rgba(0,30,60,.55); }
.note-yellow { background:var(--trim); }
.note-memo { background:var(--memo); }
.pin { position:absolute; top:-9px; left:50%; width:18px; height:18px; margin-left:-9px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ff8a78 0 3px, var(--pin) 4px);
  box-shadow:0 3px 4px rgba(0,0,0,.35); }
.tilt { transform:rotate(-2.5deg); }

.btns { display:flex; flex-wrap:wrap; gap:10px; }
.btn { display:inline-block; font-family:"GmarketSans",sans-serif; font-weight:500; font-size:17px; text-decoration:none;
  padding:14px 22px; border:2px solid var(--ink); background:var(--paper); color:var(--ink); transition:transform .15s ease-out; }
.btn.ink { background:var(--ink); color:#fff; }
.btn:hover { transform:translateY(-2px); }

/* 첫 화면 게시판 */
.switch-bar { padding-top:28px; }
.board-hero { padding:26px 0 0; }
.switch { display:inline-flex; border:2px solid var(--ink); background:var(--paper); box-shadow:0 1px 2px rgba(0,30,60,.2), 0 8px 18px -10px rgba(0,30,60,.5); }
.switch button { font:500 16px "GmarketSans",sans-serif; color:var(--ink); background:none; border:0; padding:10px 20px; cursor:pointer; }
.switch button[aria-pressed="true"] { background:var(--ink); color:#fff; }
.panel { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:28px 48px; align-items:start; }
.panel h1 { grid-column:1; color:#fff; font-size:clamp(38px,5.4vw,74px); line-height:1.08; letter-spacing:-.035em;
  text-shadow:0 2px 14px rgba(0,50,95,.3); }
.panel .lede { grid-column:1; justify-self:start; color:#fff; font-size:clamp(17px,1.6vw,21px); background:var(--deep); padding:8px 14px; }
.panel .cta-note { grid-column:1; justify-self:start; width:min(100%,540px); margin-top:8px; }
.panel aside { grid-column:2; grid-row:1 / span 3; display:grid; gap:34px; padding-top:8px; }
.cta-note .label { font-family:"GmarketSans",sans-serif; font-size:19px; font-weight:500; }
.big-phone { font-family:"GmarketSans",sans-serif; font-weight:700; font-size:clamp(34px,4.2vw,52px); letter-spacing:-.02em; margin:4px 0 16px; }
.big-phone a { text-decoration:none; }
.proof h2 { font-size:clamp(22px,2.3vw,30px); line-height:1.3; margin-bottom:10px; }
.proof .meta { font-size:15px; color:#4d4340; }
.proof a, .memo-link { text-decoration-thickness:2px; }
.note-memo { justify-self:center; width:min(100%,340px); font-family:"GmarketSans",sans-serif; font-weight:500; font-size:20px; }
.note-memo a { text-decoration:none; display:block; }
.note-memo small { display:block; font-family:"Pretendard",sans-serif; font-weight:400; font-size:15px; color:#5c4a12; margin-top:4px; }

/* 사진 줄: 흰 테두리 사진을 압정으로 */
.photos { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; margin-top:48px; padding-bottom:64px; }
.photo { background:var(--paper); padding:10px 10px 12px; text-decoration:none;
  box-shadow:0 1px 2px rgba(0,30,60,.2), 0 14px 28px -14px rgba(0,30,60,.55); position:relative; transition:transform .2s ease-out; }
.photo:hover { transform:translateY(-3px); }
.photo img { aspect-ratio:4/3; width:100%; object-fit:cover; }
.photo span { display:block; font-size:15px; margin-top:8px; line-height:1.4; }

/* 큰 종이 한 장 섹션 */
.sheet-sec { padding:0 0 72px; }
.sheet { background:var(--paper); padding:clamp(28px,4vw,56px); position:relative;
  box-shadow:0 1px 2px rgba(0,30,60,.2), 0 18px 34px -18px rgba(0,30,60,.6); }
.sheet .pin { left:40px; }
.sheet .pin + .pin { left:auto; right:31px; }
.sheet > h2 { margin-bottom:10px; }
.sheet > .intro { color:#4d4340; max-width:62ch; margin-bottom:34px; }
.board-title { display:inline-block; color:var(--ink); background:var(--paper); padding:10px 18px 8px; margin:0 0 26px; box-shadow:0 1px 2px rgba(0,30,60,.2), 0 10px 20px -12px rgba(0,30,60,.55); }
.board-sub { display:inline-block; color:#fff; background:var(--deep); padding:8px 14px; margin:-12px 0 30px; max-width:62ch; }
.sheet.memo { background:var(--memo); }
.sheet.memo .posts li { border-color:#e6d98a; }
.notes { gap:28px; }
.notes .note h3 { color:var(--deep); font-size:24px; margin-bottom:10px; }
.notes .note ul { margin:0; padding-left:1.1em; }
.notes .note li { margin:4px 0; }
.notes .src { margin-top:16px; }

.path { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:3px solid var(--ink); }
.path li { padding:20px 18px 6px 0; border-right:1px dashed #c9d9e3; margin-right:18px; }
.path li:last-child { border-right:0; margin-right:0; }
.path b { display:block; font-family:"GmarketSans",sans-serif; color:var(--deep); font-size:15px; margin-bottom:6px; }
.path h3 { font-size:22px; margin-bottom:6px; }
.path p { font-size:15px; color:#4d4340; }
.src { font-size:14px; color:#6b5f5b; margin-top:26px; }

.brands { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; border-top:3px solid var(--ink); }
.brands article { padding:24px 32px 8px 0; }
.brands article + article { padding:24px 0 8px 32px; border-left:1px dashed #c9d9e3; }
.brands h3 { color:var(--deep); font-size:24px; margin-bottom:10px; }
.brands ul { margin:0; padding-left:1.1em; }
.brands li { margin:4px 0; }

.posts { list-style:none; margin:0; padding:0; border-top:3px solid var(--ink); }
.posts li { border-bottom:1px solid #d5e4ed; }
.posts a { display:flex; gap:20px; align-items:baseline; padding:14px 0; text-decoration:none; }
.posts a:hover h3 { text-decoration:underline; }
.posts time { flex:none; width:92px; font-size:15px; color:#6b5f5b; font-variant-numeric:tabular-nums; }
.posts h3 { font-family:"Pretendard",sans-serif; font-weight:600; font-size:17px; letter-spacing:0; line-height:1.5; }
.more { display:inline-block; margin-top:20px; font-weight:600; }

.cta-board { padding:0 0 72px; }
.cta-board .cta-note { max-width:640px; margin:0 auto; text-align:center; }
.cta-board .cta-note h2 { font-size:clamp(24px,2.8vw,32px); font-weight:700; margin-bottom:8px; }
.cta-board .btns { justify-content:center; }

.page-head { padding:40px 0 30px; color:#fff; }
.page-head h1 { font-size:clamp(34px,4.6vw,60px); }
.page-head p { display:inline-block; margin-top:14px; font-size:18px; max-width:60ch; background:var(--deep); padding:8px 14px; }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:12px 10px; border-bottom:1px solid #d5e4ed; vertical-align:top; }
th { width:140px; font-weight:600; }
details { border-bottom:1px solid #d5e4ed; padding:14px 0; }
summary { cursor:pointer; font-weight:600; font-size:18px; list-style:none; position:relative; padding-right:36px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:""; position:absolute; right:8px; top:9px; width:9px; height:9px; border-right:3px solid var(--deep); border-bottom:3px solid var(--deep); transform:rotate(45deg); transition:transform .2s ease-out; }
details[open] summary::after { transform:rotate(-135deg); top:14px; }
details[open] summary { color:var(--deep); }
details p { margin-top:8px; color:#4d4340; }

footer { background:var(--ink); color:#e9e3e1; padding:40px 0 48px; font-size:15px; line-height:1.9; }
footer a { color:#fff; }
.f-name { font-family:"GmarketSans",sans-serif; font-weight:700; font-size:18px; color:#fff; margin-bottom:4px; }
.sister { margin-top:12px; }
.sister a { color:var(--trim); font-weight:600; }

/* 스위치를 누르면 종이가 다시 꽂힌다 */
@media (prefers-reduced-motion:no-preference) {
  .repin .panel > *, .repin .photo { animation:repin .42s cubic-bezier(.16,1,.3,1) both; }
  .repin .panel > *:nth-child(2) { animation-delay:.04s; } .repin .panel > *:nth-child(3) { animation-delay:.08s; }
  .repin .panel > *:nth-child(4) { animation-delay:.12s; } .repin .panel > *:nth-child(5) { animation-delay:.16s; }
  @keyframes repin { from { opacity:0; translate:0 -14px; rotate:-1.5deg; } }
}

@media (max-width:900px) {
  .strip .wrap { flex-wrap:wrap; gap:4px 12px; padding:8px 14px; }
  .call { margin-left:auto; }
  .strip nav { order:3; width:100%; margin:0; gap:18px; overflow-x:auto; white-space:nowrap; font-size:15px; }
  .panel { grid-template-columns:1fr; }
  .panel aside { grid-column:1; grid-row:auto; }
  .photos { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .path { grid-template-columns:1fr; }
  .path li { border-right:0; margin-right:0; border-bottom:1px dashed #c9d9e3; padding:16px 0; }
  .brands { grid-template-columns:1fr; }
  .brands article, .brands article + article { padding:20px 0; border-left:0; }
  .brands article + article { border-top:1px dashed #c9d9e3; }
}
@media (max-width:520px) {
  .brand img { height:calc(var(--logo-h,28px) * .75); }
  .call { font-size:0; gap:0; padding:10px; }
  .call svg { width:18px; height:18px; }
  .posts a { flex-direction:column; gap:2px; }
}

/* 체크 목록, 두 장 나란히 */
.checks { list-style:none; margin:18px 0 0; padding:0; }
.checks li { position:relative; padding:10px 0 10px 34px; border-bottom:1px solid #d5e4ed; }
.checks li::before { content:""; position:absolute; left:4px; top:17px; width:14px; height:8px; border-left:3px solid var(--board); border-bottom:3px solid var(--board); transform:rotate(-45deg); }
.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:start; }
.split .note-memo { width:auto; justify-self:stretch; font-family:inherit; font-size:17px; }
.split h2, .note-memo h2 { font-size:24px; margin-bottom:10px; }
@media (max-width:900px) { .split { grid-template-columns:1fr; } }
body { min-height:100vh; display:flex; flex-direction:column; }
main { flex:1; }
.note-memo.wide { width:auto; max-width:560px; justify-self:start; font-family:inherit; font-size:17px; }

/* 노란 물결 테두리를 게시판 양옆과 아래까지 */
html::before, html::after { content:""; position:fixed; top:0; bottom:0; width:16px; z-index:30; pointer-events:none;
  background:radial-gradient(circle at 0 12px, var(--trim) 11px, transparent 12px) 0 0/14px 24px repeat-y,
  linear-gradient(var(--trim),var(--trim)) 0 0/7px 100% no-repeat; }
html::before { left:0; }
html::after { right:0; transform:scaleX(-1); }
footer { position:relative; }
footer::before { content:""; position:absolute; left:0; right:0; top:-14px; height:14px; background:
  radial-gradient(circle at 12px 14px, var(--trim) 11px, transparent 12px) 0 0/24px 14px repeat-x; }
footer { border-top:6px solid var(--trim); }
@media (max-width:520px) { html::before, html::after { width:9px; background-size:8px 16px, 4px 100%;
  background-image:radial-gradient(circle at 0 8px, var(--trim) 7px, transparent 8px), linear-gradient(var(--trim),var(--trim)); }
  .wrap { padding:0 20px; } }