/* 홈 화면 전용 스타일 — 색은 styles.css 의 토큰만 씁니다 */

/* ───── 맨 위: 가운데 정렬 인사 + 바로가기 카드 ───── */
.hello { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; padding: clamp(48px, 9vw, 112px) 0 0; text-align: center; }
.hello-h { margin: 0; font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 400; line-height: 1.25; letter-spacing: -.02em; word-break: keep-all; }
/* 바로가기 카드: 창 폭에 따라 늘고 줄다가(styles.css 의 .cards 격자), 아주 넓어지면 최대 폭에서 멈추고 가운데에 둠 */
.go-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-card); width: 100%; max-width: 100%; margin-top: clamp(28px, 4vw, 48px); }
.go-cards { align-items: flex-start; }   /* 칸 높이를 맞추지 않아서, 내용이 많은 카드는 더 크고 적은 카드는 작게 */
.go-cards .link-tile { flex: 0 0 auto; width: min(100%, var(--w, 300px)); }
.go-cards > .add-tile { width: 100%; }
/* 바로가기 카드 설명: 최대 두 줄(한 줄이어도 두 줄 높이를 확보해 카드 크기를 같게) */
.go-cards .tile p { margin: 0; flex: none; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; line-height: 1.5; word-break: keep-all; }
/* "서비스 추가" 카드: 점선 테두리로, 눌러서 이동하는 회색 서비스 카드와 구분 */
.add-tile { background: none; border: 1.5px dashed var(--line); color: var(--muted); flex-direction: row; align-items: center; justify-content: center; gap: 12px; min-height: 96px; cursor: pointer; transition: color .25s ease, border-color .25s ease; }
.add-tile b { font-size: 1.6rem; font-weight: 300; line-height: 1; } .add-tile:hover { color: var(--text); border-color: var(--muted); }

/* ───── 서비스 둘러보기(홍보): 왼쪽 큰 카드 + 오른쪽 작은 카드들 (openai.com 첫 화면 구성을 참고) ───── */
.promo { margin-top: clamp(140px, 22.5vw, 300px); }   /* 학교 정보 카드와 둘러보기 카드 사이: 예전 값의 2.5배 */
.promo-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 48px); align-items: start; }
.promo-side { display: grid; gap: clamp(24px, 3vw, 40px); }
.pcard { display: grid; gap: 16px; width: 100%; padding: 0; background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pcard .pv { display: grid; place-items: center; overflow: hidden; border-radius: 24px; background: var(--surface); aspect-ratio: 4 / 3; transition: background .3s ease; }
.pcard.big .pv { aspect-ratio: 16 / 10; }
.pcard:hover .pv { background: var(--surface2); }
.pcard .pt { font-size: 1.2rem; font-weight: 400; line-height: 1.3; letter-spacing: -.01em; word-break: keep-all; }
.pcard.big .pt { font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.2; letter-spacing: -.02em; }
.pcard .pm { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .86rem; color: var(--muted); }
.pcard .pm b { color: var(--text); font-weight: 500; }
@media (max-width: 900px) { .promo-grid { grid-template-columns: minmax(0, 1fr); } .promo-side { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } }

/* 카드 그림(CSS·SVG 로 그린 미리보기) */
.pv-panel { width: min(78%, 440px); display: grid; gap: 12px; padding: 18px 20px; border-radius: 18px; background: var(--bg); }
.pv-row { display: grid; grid-template-columns: 1.2em 22px minmax(0, 1fr) 2.4em; gap: 12px; align-items: center; font-size: .82rem; color: var(--muted); }
.pv-row b { color: var(--text); font-weight: 600; } .pv-row em { font-style: normal; text-align: right; color: var(--text); }
.pv-av { width: 22px; height: 22px; border-radius: 50%; background: var(--surface2); }
.pv-bar { display: flex; gap: 3px; height: 10px; border-radius: 999px; background: var(--surface2); overflow: hidden; }
.pv-bar u { display: block; border-radius: 999px; background: var(--text); }
.pv-ctl { display: inline-flex; align-items: center; gap: 14px; justify-self: end; margin-top: 4px; padding: 6px 8px; border-radius: 999px; background: var(--surface2); font-size: .9rem; }
.pv-ctl i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); font-style: normal; }
.pv-svg { width: min(78%, 440px); height: auto; color: var(--text); }
.pv-mono { font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 300; color: var(--muted); }

/* ───── 홈 대시보드: 오늘 급식·시간표·학사일정 (서비스 둘러보기 카드와 같은 구성, 여백은 넉넉하게) ───── */
.promo.dash { margin-top: clamp(72px, 11vw, 148px); }
.dash .d-day { display: flex; align-items: center; gap: 8px; } .dash .d-day b { font-size: 1.05rem; font-weight: 500; min-width: 7.5em; text-align: center; }
/* 급식 박스 맨 윗줄(박스 안): 날짜 이동 + 학교 바꾸기 */
.d-bar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 4px; }
.d-wide { grid-column: 1 / -1; display: grid; justify-items: start; gap: 14px; }
.d-i { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--text); font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: color .25s ease; } .d-i:hover { color: var(--muted); }
.dcard { cursor: default; }
.d-cap { display: flex; flex-wrap: wrap; align-items: center; min-height: 34px; gap: 4px 14px; }   /* 제목과 설명(학년·반)을 한 줄로 */
.dcard .pt, .dcard.big .pt { font-size: clamp(1.15rem, 1.5vw, 1.35rem); letter-spacing: -.01em; }
/* 제목은 둥근 상자 안 왼쪽 위로: 상자는 카드 전체, 안쪽 내용(.pv)은 배경 없이 */
.dcard { align-content: start; gap: var(--pad-card); padding: clamp(24px, 3vw, 38px); border-radius: 24px; background: var(--surface); }
.dcard .d-cap { order: -1; }
.dcard .pv { display: block; place-items: unset; aspect-ratio: auto; min-height: 0; padding: 0; background: none; overflow: visible; }
.dcard:hover .pv { background: none; }
.promo-side { grid-auto-rows: auto; }   /* 오른쪽 상자들은 내용 높이대로 (상자가 늘어나도 빈 공간이 생기지 않게) */
.dcard.big { min-height: 320px; }
.dcard.big .pv { aspect-ratio: auto; min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 28px clamp(24px, 4vw, 56px); align-content: start; }
.d-meal h4 { margin: 0 0 12px; font-size: .82rem; font-weight: 500; color: var(--muted); } .d-meal h4 small { margin-left: 8px; font-size: .78rem; font-weight: 400; }
.d-meal p { margin: 0; font-size: 1rem; line-height: 1.85; word-break: keep-all; }
.d-tt, .d-sch { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.d-tt li, .d-sch li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 10px; align-items: baseline; }
.d-sch li { grid-template-columns: 4.6em minmax(0, 1fr); }
.d-sch b { display: grid; grid-template-columns: 2.9em 1fr; align-items: baseline; }   /* 날짜와 요일을 각자의 칸에 맞춰 줄이 달라도 요일이 세로로 정렬 */
.d-sch b small { margin-left: 0; }
.d-tt b, .d-sch b { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; } .d-sch b small { margin-left: 4px; font-weight: 400; font-size: .74rem; }
.d-tt span, .d-sch span { word-break: keep-all; }
.d-load, .d-empty { margin: 0; color: var(--muted); }
.promo-grid.one { grid-template-columns: minmax(0, 1fr); }
/* 두 열 배치(넓은 화면): 짧은 쪽 열은 헤더 아래에 붙어 있고, 긴 쪽 열만 올라간다. 두 열의 아래가 맞는 순간부터 화면 전체가 함께 스크롤된다. (openai.com 첫 화면과 같은 방식)
   두 열 모두 sticky 로 두면 높이가 낮은 쪽만 움직일 여유가 있어 자동으로 그쪽이 붙는다. */
@media (min-width: 901px) { .promo-grid > * { position: sticky; top: var(--stick, calc(var(--hdr-h, 69px) + 32px)); } }   /* --stick: dash.js 가 열 높이가 화면보다 크면 음수로 줄여, 열의 아래끝이 보일 때까지 스크롤된 뒤에 붙게 함(아래가 잘리지 않게) */
.d-setup p { margin: 0 0 18px; color: var(--muted); line-height: 1.6; word-break: keep-all; }
.dcard .d-setup, .dcard.big .pv.d-setup { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: start; gap: 0; min-height: 240px; }
.dcard .pv > .d-setup { min-height: 0; }
.d-btn { height: 42px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--text); color: var(--bg); font: inherit; cursor: pointer; transition: opacity .25s ease; } .d-btn:hover { opacity: .85; }
.d-tt .d-cls { margin-right: 10px; font-style: normal; font-weight: 500; } .d-tt .d-off span { color: var(--muted); }
.d-setup .link { margin-top: 12px; }
/* 선택 목록이 길면(교사 이름 고르기 등) 팝업 안에서 스크롤 */
.ask-dlg .ask-choices { max-height: 46dvh; overflow-y: auto; overscroll-behavior: contain; }
/* 마이페이지 > 시간표 설정 팝업 */
.st-dlg { width: min(460px, calc(100vw - 24px)); }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.st-row b { display: block; font-weight: 500; } .st-row small { display: block; margin-top: 4px; color: var(--muted); font-size: .86rem; }
.st-btns { display: flex; align-items: center; gap: 14px; flex: none; }
.st-note { margin: 14px 0 0; }
.st-dlg .row.end { margin-top: 22px; }

/* 학교의 공개 연락처: 학교 설정에 맞춰 나이스에서 불러옴 */
.d-school { display: grid; gap: var(--gap-head); }
.d-school p, .d-school dl, .d-school dd { margin: 0; }
.d-school p { word-break: keep-all; overflow-wrap: anywhere; }
.d-school dl { display: grid; gap: var(--gap-head); }
.d-school dt { color: var(--muted); font-size: .82rem; }
.d-school dd { line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }

/* 급식 제목과 날짜를 한 줄에, 공간이 모자라면 날짜만 다음 줄로 */
.dcard[data-dash="meal"] .d-cap { align-items: center; justify-content: space-between; gap: var(--gap-head); }
.dcard[data-dash="meal"] .d-bar { margin: 0 0 0 auto; max-width: 100%; }
.dcard[data-dash="meal"] .d-day { flex-wrap: wrap; justify-content: center; }

.d-date { display: inline-flex; align-items: center; gap: 8px; flex: none; }



/* 분류 화면 서비스 카드도 홈 바로가기와 같은 칸 폭을 사용 */
.service-cards { margin-top: 0; justify-content: flex-start; }

/* 내 정보 창 안의 시간표 항목 */
#profile-extra { margin-top: 14px; } #profile-extra:empty { display: none; }

/* 처음(학교를 정하기 전) 안내 카드: 제목은 안쪽 왼쪽 위, 시작 방법은 같은 크기의 두 선택지 */
.d-setup .d-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; width: 100%; margin-top: 4px; }
.d-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 18px 22px; border: 0; border-radius: 18px; background: var(--bg); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background-color .25s ease; }
.d-opt:hover, .d-opt:focus-visible { background: var(--surface2); }
.d-opt b { grid-column: 1; font-weight: 500; } .d-opt small { grid-column: 1; color: var(--muted); font-size: .84rem; word-break: keep-all; }
.d-opt i { grid-column: 2; grid-row: 1 / span 2; font-style: normal; color: var(--muted); font-size: 1.2rem; }
.d-setup .d-note { margin-top: 14px; color: var(--muted); font-size: .8rem; }
.d-setup > p { margin-bottom: 14px; }
.dcard .d-setup, .dcard.big .pv.d-setup { min-height: 0; align-content: start; }
.promo-grid.one .dcard.big { min-height: 0; }

/* 급식: 식사 선택(조식·중식·석식) + 넉넉한 메뉴 간격, 카드는 내용 크기에 맞춤 */
.d-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg); justify-self: start; }
.d-sb { height: 32px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: .9rem; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.d-sb:hover { color: var(--text); } .d-sb.on { background: var(--text); color: var(--bg); }
.dcard[data-dash="meal"] .pv { display: grid; gap: clamp(18px, 2.4vw, 28px); align-content: start; }
.dcard[data-dash="meal"] .d-meal p { line-height: 2.2; font-size: 1.05rem; }
.dcard[data-dash="meal"] .d-meal h4 { margin-bottom: 8px; }
.dcard.big { min-height: 0; }
.promo.dash .promo-grid:not(.one) { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
@media (max-width: 900px) { .promo.dash .promo-grid:not(.one) { grid-template-columns: minmax(0, 1fr); } }

/* 급식 카드: 안쪽은 한 줄 세로 배치(식사 선택 → 메뉴). 선택 단추가 늘어나지 않게 */
.dcard[data-dash="meal"] .pv { grid-template-columns: minmax(0, 1fr); }
.dcard[data-dash="meal"] .d-seg { align-self: start; }
/* 자주 쓰는 서비스 카드: 높이는 모두 같게(제목 한 줄 + 있으면 작은 설명 한 줄) */
.go-cards { align-items: stretch; }
.go-cards .link-tile { min-height: 104px; justify-content: flex-start; padding-top: clamp(22px, 2vw, 28px); }   /* 제목 높이를 카드마다 같게 위에서부터 */
.go-cards .tile p { font-size: .86rem; }
/* 좁은 화면: 자주 쓰는 서비스는 두 줄로 나란히(폭이 제각각이면 한 줄씩 길게 쌓여 보임) */
@media (max-width: 560px) { .go-cards .link-tile { width: calc(50% - var(--gap-card) / 2); min-height: 88px; padding: 18px 20px; } .go-cards .link-tile h3 { font-size: 1rem; } }

/* 홈 바로가기 카드: 살짝 떠 있는 느낌 (마우스를 올리면 조금 더 뜸) */
.go-cards .link-tile { background: var(--tile); box-shadow: var(--tile-float); transition: none; }   /* 테두리처럼 보이는 1px 링·윗선 하이라이트 없이 그림자만 */   /* 마우스에 즉각 반응(올릴 때·벗어날 때 모두 지연 없음) */
.go-cards .link-tile:hover { background: var(--tile); box-shadow: var(--tile-float-hi); transform: translateY(-2px); }

/* 홈 둘러보기(홍보) 카드 사이 여백: 예전 값의 1.5배 (급식·학교 정보 카드는 그대로) */
.promo:not(.dash) .promo-grid { gap: clamp(36px, 5.25vw, 72px); }
.promo:not(.dash) .promo-side { gap: clamp(36px, 4.5vw, 60px); }

/* ───── 홈 서비스 영역(분류별): openai.com 첫 화면처럼 "제목 + 모두 보기" 줄, 아래에 분류 색 바탕의 큰 그림 카드 ───── */
.hsec-title { max-width: var(--maxw); margin: clamp(72px, 10vw, 140px) 0 clamp(20px, 2.4vw, 32px); }
.hsec-title h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 400; letter-spacing: -.02em; }
.hsecs { display: grid; }
.hsecs > .hsec-title { margin-bottom: clamp(32px, 4vw, 52px); }
.hsec-cols { --svc-gap: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(290px, calc((100% - 2 * var(--svc-gap)) / 3))), 1fr)); gap: clamp(44px, 5vw, 72px) var(--svc-gap); align-items: start; }   /* 서비스 카드: 분류로 묶지 않고 한 줄로 이어서 나란히(이전 카드 크기 그대로, 최대 3열) */
.hsec, .hsec-grid { display: contents; }
.hcard { display: grid; align-content: start; gap: 16px; width: 100%; padding: 0; background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.hcard-art { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 24px; background: var(--surface); }
.hcard-art > .demo { position: absolute; inset: 0; width: auto; height: auto; }
.hcard-art .pv-mono { color: var(--muted); }
.hcard-art { transition: transform .5s cubic-bezier(.22, .61, .36, 1); } .hcard:hover .hcard-art { transform: scale(1.015); }
.hcard-t { font-size: 1.25rem; line-height: 1.3; letter-spacing: -.01em; word-break: keep-all; }
.hcard-m { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .86rem; color: var(--muted); } .hcard-m b { color: var(--text); font-weight: 500; }


/* 정보 상자 안 글자: 색 바탕 위에서 흐려 보이지 않게 제목은 굵게, 보조 글자(muted)는 본문색을 섞어 진하게, 식사 선택 알약은 반투명으로 바탕과 어울리게 */
.dcard { --muted: color-mix(in srgb, var(--text) 66%, transparent); }
.dcard .pt { font-weight: 600; }
.dcard .d-seg { background: color-mix(in srgb, var(--text) 6%, transparent); }   /* 선택 알약이 튀지 않게: 바탕은 살짝 어둡게, 선택된 것은 흰 알약 + 얇은 그림자 */
.dcard .d-sb { font-weight: 500; } .dcard .d-sb.on { font-weight: 600; background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.dcard .d-meal h4, .dcard .d-tt b, .dcard .d-sch b { font-weight: 600; }

/* 방학 D-day · 날씨 위젯 */
.d-dday { display: grid; gap: 2px; align-content: start; } .d-dday .d-dd { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.d-dday p { margin: 4px 0 0; font-size: 1.05rem; } .d-dday small { color: var(--muted); font-size: .86rem; }
.d-wx { display: grid; gap: 14px; }
.d-wx-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; } .d-wx-main b { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; } .d-wx-main span { color: var(--muted); }
.d-wx dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 0; } .d-wx dt { color: var(--muted); font-size: .8rem; } .d-wx dd { margin: 2px 0 0; font-weight: 500; }
.d-wx-tip { margin: 0; font-size: .86rem; color: var(--muted); }

/* 날씨 움직이는 그림 (카드 오른쪽 위). 해·구름·비·눈·번개를 CSS 로만 그림 */
.d-wx { position: relative; }
.wx-fx { position: absolute; top: 0; right: 0; width: 120px; height: 90px; pointer-events: none; }
.wx-fx i { position: absolute; display: block; }
.wx-sun { left: 38px; top: 18px; width: 44px; height: 44px; border-radius: 50%; background: #f9c22e; border: 2.5px solid var(--cp-ink, #26272e); box-sizing: border-box; animation: wxPulse 3.2s ease-in-out infinite; }
.wx-sun::before { content: ""; position: absolute; inset: -16px; border-radius: 50%; background: repeating-conic-gradient(var(--cp-ink, #26272e) 0 5deg, transparent 5deg 30deg); -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%, #000 76%, transparent 78%); mask: radial-gradient(circle, transparent 58%, #000 60%, #000 76%, transparent 78%); animation: wxSpin 16s linear infinite; }
.wx-sun.small { left: 62px; top: 6px; width: 34px; height: 34px; } .wx-sun.small::before { inset: -12px; }
.wx-cloud { width: 64px; height: 26px; border-radius: 999px; background: #fffefb; filter: drop-shadow(1.6px 0 0 var(--cp-ink, #26272e)) drop-shadow(-1.6px 0 0 var(--cp-ink, #26272e)) drop-shadow(0 1.6px 0 var(--cp-ink, #26272e)) drop-shadow(0 -1.6px 0 var(--cp-ink, #26272e)); animation: wxDrift 6s ease-in-out infinite; }
.wx-cloud::before, .wx-cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.wx-cloud::before { width: 28px; height: 28px; left: 10px; top: -14px; } .wx-cloud::after { width: 20px; height: 20px; left: 32px; top: -9px; }
.wx-cloud.c1 { left: 28px; top: 26px; } .wx-cloud.c2 { left: 4px; top: 12px; width: 52px; height: 22px; animation-duration: 8s; animation-direction: alternate-reverse; opacity: .85; }
.wx-cloud.dark { background: #8b90a4; }
.wxk-partly .wx-cloud.c1 { left: 34px; top: 30px; }
.wx-drop, .wx-flake { top: 44px; opacity: 0; }
.wx-drop { width: 2px; height: 11px; border-radius: 2px; background: #5f9fe0; animation: wxFall .95s linear infinite; }
.wx-flake { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(95, 130, 175, .45); animation: wxSnow 3.2s ease-in infinite; }
.wx-bolt { left: 50px; top: 46px; width: 18px; height: 30px; background: #f7d34a; clip-path: polygon(55% 0, 10% 58%, 45% 58%, 30% 100%, 92% 38%, 55% 38%); opacity: 0; animation: wxFlash 3.4s linear infinite; }
@keyframes wxSpin { to { transform: rotate(360deg); } }
@keyframes wxPulse { 50% { transform: scale(1.06); } }
@keyframes wxDrift { 0%, 100% { transform: translateX(-5px); } 50% { transform: translateX(7px); } }
@keyframes wxFall { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(34px); opacity: 0; } }
@keyframes wxSnow { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(6px, 20px); } 100% { transform: translate(-4px, 36px); opacity: 0; } }
@keyframes wxFlash { 0%, 86%, 94%, 100% { opacity: 0; } 88%, 92% { opacity: 1; } 90% { opacity: .25; } }

/* 서비스 화면 제목 옆 즐겨찾기(★) 단추 */
.has-pin { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pin-btn { display: inline-grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; transition: color .25s ease, transform .25s ease; }   /* 동그라미 배경 없이 별만(2026-10-25 사용자 의견) */
.pin-btn svg { width: 19.5px; height: 19.5px; } .pin-btn:hover { color: var(--text); transform: scale(1.08); } .pin-btn.on { color: var(--text); }
/* 밤: 해 대신 초승달과 반짝이는 별 */
.wx-moon { left: 42px; top: 16px; width: 40px; height: 40px; border-radius: 50%; background: transparent; box-shadow: -11px 5px 0 0 #f2d46b; transform: rotate(-12deg); filter: drop-shadow(1.6px 0 0 var(--cp-ink, #26272e)) drop-shadow(-1.6px 0 0 var(--cp-ink, #26272e)) drop-shadow(0 1.6px 0 var(--cp-ink, #26272e)) drop-shadow(0 -1.6px 0 var(--cp-ink, #26272e)); animation: wxPulse 4s ease-in-out infinite; }
.wx-moon.small { left: 66px; top: 6px; width: 32px; height: 32px; box-shadow: -9px 4px 0 0 #f2d46b; }
.wx-star { width: 5px; height: 5px; border-radius: 50%; background: #f2d46b; opacity: .35; animation: wxTwinkle 2.6s ease-in-out infinite; } .wx-star.s1 { left: 92px; top: 14px; } .wx-star.s2 { left: 22px; top: 46px; animation-delay: .9s; } .wx-star.s3 { left: 100px; top: 58px; animation-delay: 1.7s; }
@keyframes wxTwinkle { 50% { opacity: 1; transform: scale(1.5); } }
.d-cap .wx-loc { font-size: .8rem; padding: 0; }

/* 홈 위젯 상자(급식·내 수업·날씨 등): '과학 개념'와 같은 네임펜 테두리 + 연한 파스텔 크레파스 칠. 서비스 둘러보기 카드는 그대로.
   손으로 그린 느낌은 상자마다 조금씩 다른 모서리 곡률로 낸다(스크롤이 느려지는 SVG 필터는 쓰지 않는다). 칠은 라이트·다크 모두 종이색 계열이라 글자는 항상 진한 잉크색. 위젯마다 색이 다르다. */
.promo.dash .dcard { isolation: isolate; background: none; --text: var(--cp-ink, #26272e); --muted: color-mix(in srgb, var(--cp-ink, #26272e) 68%, transparent); --bg: #fffefb; --dfill: var(--cp-p-gray, #e7e8ec); --drad: 24px 27px 23px 26px / 26px 23px 27px 24px; color: var(--text); }
.promo.dash .dcard::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; clip-path: var(--dclip, none); background: var(--dgrain, none) 0 0 / 160px 160px repeat, #fbfaf5; }   /* 종이 질감 바탕(불규칙한 바깥선 모양으로 잘림) */
.promo.dash .dcard::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--dsk, none) 0 0 / 100% 100% no-repeat; }   /* 불규칙한 파스텔 칠 + 빗금 + 끊기지 않는 검정 바깥선(dash.js 가 크기에 맞춰 그림) */
.promo.dash .dcard[data-dash="meal"] { --dfill: var(--cp-p-yellow, #f8e7a6); --drad: 25px 22px 27px 23px / 23px 27px 22px 26px; }
.promo.dash .dcard[data-dash="my"] { --dfill: #b6e2de; --drad: 22px 26px 24px 28px / 27px 22px 26px 23px; }
.promo.dash .dcard[data-dash="dday"] { --dfill: var(--cp-p-orange, #fbd9b0); --drad: 27px 23px 26px 22px / 22px 26px 23px 27px; }
.promo.dash .dcard[data-dash="wx"] { --dfill: var(--cp-p-sky, #cfe0f8); --drad: 23px 28px 22px 26px / 26px 23px 28px 22px; }
.promo.dash .dcard[data-dash="sch"] { --dfill: var(--cp-p-pink, #f6c9c9); --drad: 26px 23px 28px 22px / 23px 27px 22px 26px; }
.promo.dash .dcard[data-dash="school"] { --dfill: var(--cp-p-purple, #e0d4f5); --drad: 24px 28px 22px 27px / 28px 22px 26px 24px; }
.promo.dash .dcard[data-dash="tt"] { --dfill: #d9dbe2; }
.promo.dash .dcard .d-seg { background: none; }   /* 알약 틀·고른 칸은 dash.js 가 손그림 선으로 그린다 */
.promo.dash .dcard .d-sb.on { background: none; box-shadow: none; }
@media (max-width: 900px) { .promo.dash .dcard { position: relative; } }
.promo.dash .promo-side .dcard { position: relative; }   /* 오른쪽 작은 상자들은 .promo-grid 의 직접 자식이 아니라 sticky 가 아님 → 테두리(::before) 기준이 되도록 */   /* 넓은 화면에서는 .promo-grid > * 의 sticky(왼쪽 카드 고정)를 그대로 쓴다. sticky 도 ::before 의 기준이 된다 */
/* 날씨 그림이 글씨를 덮지 않게: 기온 줄에 그림 높이만큼 자리를 잡아 두어, 아래 항목들이 그림 영역 밖에서 시작한다 */
.d-wx-main { min-height: 92px; align-items: center; padding-right: 84px; }   /* 오른쪽 84px 은 그림 자리: 글이 길면 줄바꿈 */

/* 다크 모드: 칠판에 분필. 선·글자는 크림색, 바탕은 어두운 종이색, 파스텔 칠은 dash.js 가 낮은 농도로 얹는다. (#dash 에 .dk 가 붙음) */
.promo.dash.dk .dcard { --cp-ink: #e8e4d8; --bg: #3a3a3e; }
.promo.dash.dk .dcard::before { background: #2f2f33; }   /* 어두운 바탕에서는 흰 알갱이를 칠(svg) 위에만 아주 약하게 */

/* ───── 오늘의 인사이트: 칠판(다크)·종이(라이트) 위에 손으로 쓱 그린 한 장면 ───── */
.promo.dash .dcard[data-dash="ins"] { --dfill: #98c6a5; --drad: 25px 22px 27px 23px / 23px 27px 22px 26px; }
.dcard[data-dash="ins"] { min-height: 0; }
.dcard[data-dash="ins"] .d-cap { justify-content: space-between; }
.dcard.big[data-dash="ins"] .pv { display: block; }
.ins { display: grid; gap: clamp(18px, 2.4vw, 28px); }
.ins-top { display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); }
.ins-hero { margin: 0; font-size: clamp(1.35rem, 2.6vw, 2rem); font-weight: 500; line-height: 1.3; letter-spacing: -.02em; word-break: keep-all; }
.ins-week { display: block; margin-top: 6px; color: var(--muted); font-size: .84rem; }
.ins-dd { flex: none; width: 40px; height: 40px; fill: none; stroke: var(--text); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.ins-dd.ins-big { width: clamp(52px, 6vw, 72px); height: clamp(52px, 6vw, 72px); stroke-width: 2; }
.ins-dd path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: insdraw 1.1s cubic-bezier(.4, .1, .3, 1) forwards; animation-delay: calc(var(--i, 0) * .18s); }
@keyframes insdraw { to { stroke-dashoffset: 0; } }
/* 오늘 수업 띠 */
.ins-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ins-strip li { position: relative; display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 16px; font-size: .9rem; }
.ins-strip b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ins-strip .ts-done { opacity: .5; }
.ins-strip .ts-now { color: var(--bg); }
.ins-strip .ts-now i { font-style: normal; font-size: .72rem; opacity: .85; }
/* 제안 카드 */
.ins-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 14px; }
.ins-c { display: grid; align-content: start; gap: 10px; padding: 18px 20px 20px; }
.ins-ch { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ins-pill { padding: 3px 11px; border-radius: 999px; font-size: .78rem; font-weight: 600; color: #26272e; background: var(--cp-p-gray, #e7e8ec); }
.ik-check .ins-pill { background: var(--cp-p-orange, #fbd9b0); } .ik-praise .ins-pill { background: var(--cp-p-green, #cdebd0); } .ik-lesson .ins-pill { background: var(--cp-p-sky, #cfe0f8); } .ik-day .ins-pill { background: var(--cp-p-pink, #f6c9c9); } .ik-ask .ins-pill { background: var(--cp-p-purple, #e0d4f5); }
.ins-c .ins-dd { width: 34px; height: 34px; }
.ins-t { margin: 0; font-size: 1.02rem; font-weight: 500; line-height: 1.5; word-break: keep-all; }
.ins-sub { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.55; word-break: keep-all; }
.ins-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ins-go, .ins-do, .ins-ans button { border: 0; background: none; color: var(--text); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--text) 40%, transparent); }
.ins-go:hover, .ins-do:hover, .ins-ans button:hover { text-decoration-color: var(--text); }
.ins-ans { display: flex; flex-wrap: wrap; gap: 8px; } .ins-ans button { padding: 7px 16px; text-decoration: none; }
.ins-done { color: var(--muted); font-size: .84rem; }
.ins-quiet { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.6; word-break: keep-all; }
/* 수행평가 입력률 고리 */
.ins-ring { width: 40px; height: 40px; flex: none; } .ins-ring circle { fill: none; stroke: color-mix(in srgb, var(--text) 22%, transparent); stroke-width: 3.4; } .ins-ring .v { stroke: var(--text); stroke-linecap: round; } .ins-ring text { fill: var(--text); font-size: 10px; font-weight: 600; }
/* 칠판 느낌: 다크에서는 어두운 초록 칠판 */
.promo.dash.dk .dcard[data-dash="ins"] { --dfill: #6fb88b; }
.promo.dash.dk .dcard[data-dash="ins"]::before { background: #26362d; }

/* ───── 점수 관리 > 순위표: 막대 그림만 흰 종이(다크는 어두운 종이) 위 손그림 테두리 상자(.skhost > .skcard) — 칠·테두리는 dash.js 의 sketch 가 그림 ───── */
.skhost .skcard { position: relative; isolation: isolate; background: none; padding: clamp(18px, 2.6vw, 34px); --text: var(--cp-ink, #26272e); --muted: color-mix(in srgb, var(--cp-ink, #26272e) 68%, transparent); --bg: #fffefb; color: var(--text); }
.skhost .skcard::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; clip-path: var(--dclip, none); background: #fffefb; }   /* 흰 종이 바탕: 막대 색이 묻히지 않게 칠·빗금·질감 없이 */
.skhost .skcard::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--dsk, none) 0 0 / 100% 100% no-repeat; }
.skhost.dk .skcard { --cp-ink: #e8e4d8; --bg: #3a3a3e; }
.skhost.dk .skcard::before { background: #2f2f33; }
.skhost .sc-dot { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--text) 50%, transparent); }   /* 초록 바탕에서 초록 영역 점이 묻히지 않게 얇은 테두리 */
/* 순위표 막대(알약): 점수를 받아 색이 칠해진 칸에만 범례 점과 같은 가는 테두리(빈 바탕 알약은 없음) — 초록 바탕에서 색이 묻히지 않게 */
.skhost .sc-bar { overflow: visible; }   /* 색칠된 알약의 테두리가 위·아래에서 잘리지 않게 */
.skhost .sc-bar .sc-seg { box-shadow: inset 0 0 0 1.3px color-mix(in srgb, var(--text) 55%, transparent); }   /* 색칠된 칸마다 범례 점과 같은 평범한 가는 테두리 */

/* ───── 질문 아래: 카드 옆 도구 단추 (연필 하나 / 비었을 때는 점선 동그라미 +) ───── */
.go-cards > .go-pen, .go-cards > .go-plus { flex: none; align-self: center; }
.go-cards { position: relative; padding-inline: 48px; }   /* 좌우 같은 여백: 연필이 들어갈 자리이면서 카드 정렬은 그대로 가운데 */
.go-cards > .go-pen { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }   /* 연필은 정렬에서 완전히 빠져 있음(카드끼리만 가운데 정렬) */
.go-plus { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px dashed var(--line); border-radius: 50%; background: none; color: var(--muted); font: inherit; font-size: 1.5rem; font-weight: 300; line-height: 1; cursor: pointer; transition: color .25s ease, border-color .25s ease; }
.go-plus:hover { color: var(--text); border-color: var(--muted); }
.go-pen { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; transition: color .25s ease, background .25s ease; }
.go-pen:hover { color: var(--text); background: var(--surface); }
@media (max-width: 560px) { .go-cards { padding-inline: 0; padding-bottom: 44px; } .go-cards > .go-pen { top: auto; bottom: 0; transform: none; } }

/* 분류 화면(수업 보조 등)의 서비스 카드: 오른쪽 위에 즐겨찾기 별(눌러서 이동하는 카드 안에 단추를 넣을 수 없어 겉을 한 겹 감쌈) */
.service-cards > .sv-w { position: relative; display: flex; flex: 0 0 auto; width: min(100%, var(--w, 300px)); }
.service-cards > .sv-w > .link-tile { width: 100%; padding-right: 54px; }
.service-cards > .sv-w > .pin-btn { position: absolute; top: 14px; right: 14px; }
.service-cards > .sv-w > .pin-btn::after { content: ""; position: absolute; inset: -10px; }
@media (max-width: 560px) { .service-cards > .sv-w { width: calc(50% - var(--gap-card) / 2); } .service-cards > .sv-w > .link-tile { padding-right: 46px; } }