@charset "utf-8";
/* =========================================================================
   오감놀이터 모바일 (senseland) — 디자인시안 390px 기준
   ========================================================================= */

.slm { position:relative; background:#FFFCF7; padding-bottom:40px;
       font-family:'Pretendard','Noto Sans KR',sans-serif; color:#3A3A3A; }
.slm * { box-sizing:border-box; }
.slm-empty { text-align:center; color:#B5A99D; font-size:12px; padding:30px 0; }

/* =============================== 1. 지도 =============================== */
.slm-map {
    position:relative; width:390px; max-width:100%; height:742px; margin:0 auto;
    background:#cfeaf6 url(https://www.edupre.co.kr/images/spedu/senseland/senseland_map_bg_m2.png) center/cover no-repeat;
    overflow:hidden;
}
.slm-node-img { position:absolute; z-index:2; display:block; text-decoration:none; }
.slm-node-img img {
    width:100%; height:100%; object-fit:contain; display:block;
    filter:drop-shadow(0 5px 6px rgba(0,0,0,.12));
}
.slm-node-label {
    position:absolute; z-index:3;
    box-sizing:border-box; width:115px; height:32px;
    display:inline-flex; align-items:center; justify-content:flex-start; gap:6px;
    padding:0 8px;
    background:#fff; border:1.5px solid #F0E4D8; border-radius:16px;
    text-decoration:none; white-space:nowrap;
}
.slm-node-label:hover { text-decoration:none; }
.slm-node-badge {
    box-sizing:border-box; flex:none;
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:24px; border-radius:12px;
    color:#fff; font-size:12px; font-weight:700;
}
.slm-node-name {
    flex:1; min-width:0; text-align:center;
    font-size:13.5px; font-weight:700; color:#3A3A3A;
    overflow:hidden; text-overflow:ellipsis;
}
.slm-node-label.is-active { background:#FFB088; border-color:#FFB088; }
.slm-node-label.is-active .slm-node-name { color:#fff; }
/* 미사용 월 — 라벨 비활성(아이콘은 원본 그대로) */
.slm-node-label.is-disabled { background:#F3F1EC; border-color:#E4E0D8; }
.slm-node-label.is-disabled .slm-node-name { color:#C7C1B5; }

/* 준비중 안내 팝업 */
.slm-ready-modal { position:fixed; inset:0; z-index:10001; display:flex; align-items:center; justify-content:center; }
.slm-ready-modal[hidden] { display:none; }
.slm-ready-dim { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.slm-ready-box {
    position:relative; z-index:1; width:320px; max-width:88vw;
    background:#fff; border-radius:18px; padding:36px 26px 26px; text-align:center;
    box-shadow:0 20px 50px rgba(0,0,0,.22);
}
.slm-ready-icon {
    width:64px; height:64px; margin:0 auto 18px;
    display:flex; align-items:center; justify-content:center;
    background:#FCEFD3; border-radius:50%; font-size:28px;
}
.slm-ready-title { font-size:21px; font-weight:800; color:#5C5148; margin:0 0 12px; }
.slm-ready-desc { font-size:13px; color:#9A8F82; line-height:1.6; margin:0 0 22px; }
.slm-ready-ok {
    width:180px; max-width:100%; height:46px;
    background:#F0834A; border:0; border-radius:23px;
    color:#fff; font-size:15px; font-weight:700; cursor:pointer;
}

/* =============================== 2. 꿀팁 =============================== */
.slm-tip-head { display:flex; align-items:center; gap:12px; margin:24px 0 12px; padding:0 20px; }
.slm-tip-head__badge {
    display:inline-flex; align-items:center; gap:6px; flex:none;
    height:30px; padding:0 12px; background:#FFE3A3; border-radius:15px;
    font-size:14px; font-weight:700; color:#7A5A1F;
}
.slm-tip-head__badge i { color:#F2884B; }
.slm-tip-head__desc { font-size:12px; font-weight:500; color:#F2884B; }

.slm-tips { margin:0 20px; background:#fff; border:2px solid #9ED4C6; border-radius:16px; padding:14px 12px; }
.slm-tip { border-bottom:1px solid #EFE5DA; padding:8px 0; }
.slm-tip:last-child { border-bottom:0; }
.slm-tip__toggle {
    width:100%; display:flex; align-items:center; justify-content:space-between;
    padding:6px 4px; background:none; border:0; cursor:pointer;
    font-size:14px; font-weight:700; color:#3FA796; text-align:left;
}
.slm-tip:not(.is-open) .slm-tip__toggle { color:#5C5148; font-size:12.5px; font-weight:600; }
.slm-tip__toggle .slm-arrow { color:#3FA796; font-size:12px; }
.slm-tip:not(.is-open) .slm-tip__toggle .slm-arrow { color:#B5A99D; transform:rotate(180deg); }
.slm-tip__body { display:none; padding:4px 0 6px; }
.slm-tip.is-open .slm-tip__body { display:block; }

.slm-tip-block { position:relative; background:#F0F9F6; border-radius:12px; padding:14px 12px 42px; margin-bottom:10px; }
.slm-tip-block:last-child { margin-bottom:0; }
.slm-tip-block__label { font-size:13px; font-weight:700; color:#3FA796; margin:0 0 8px; }
.slm-tip-block__text { font-size:12px; line-height:1.5; color:#5C5148; margin:0 0 6px; }
.slm-tip-block__text:last-of-type { margin-bottom:0; }
.slm-copy-btn {
    position:absolute; right:12px; bottom:12px;
    height:30px; padding:0 16px; background:#F2884B; border:0; border-radius:15px;
    color:#fff; font-size:10.5px; font-weight:700; cursor:pointer;
}

/* 복사 토스트(블록 가운데) */
.slm-toast {
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.96);
    background:rgba(0,0,0,.82); color:#fff; padding:9px 18px; border-radius:20px;
    font-size:12px; font-weight:500; white-space:nowrap; z-index:10;
    opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.slm-toast.show { opacity:1; transform:translate(-50%,-50%) scale(1); }

/* =============================== 3. 식재료 소개 =============================== */
.slm-intro { display:flex; align-items:center; gap:14px; margin:20px; padding:16px; background:#FAF4EC; border-radius:16px; }
.slm-intro__thumb { width:54px; height:54px; border-radius:50%; object-fit:cover; flex:none; background:#f1ece5; }
.slm-intro__thumb--empty { background:#f1ece5; }
.slm-intro__body { flex:1; min-width:0; }
.slm-intro__name { display:block; font-size:14px; font-weight:700; color:#F2884B; margin-bottom:6px; }
.slm-intro__desc { display:block; font-size:12px; line-height:1.5; color:#5C5148; }

/* =============================== 4. 영상 =============================== */
.slm-video {
    position:relative; margin:0 20px; height:197px; background:#5C5148; border-radius:16px; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
}
.slm-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.slm-play {
    width:38px; height:38px; border-radius:50%; background:#fff;
    display:flex; align-items:center; justify-content:center;
}
.slm-play::after { content:''; margin-left:3px; border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent #5C5148; }

/* =============================== 5. 자료 탭 =============================== */
.slm-res { margin:32px 20px 0; }
.slm-res__tabs { display:flex; border-bottom:1px solid #EFE5DA; }
.slm-res__tab {
    flex:1; height:44px; border:1px solid #EFE5DA; border-bottom:0;
    background:#FAF4EC; color:#8A7D72; font-size:12px; font-weight:500; cursor:pointer;
}
.slm-res__tab.is-active { background:#FFE3A3; color:#FFA900; font-weight:700; border-top:3px solid #FFA900; }
.slm-res__dl {
    display:block; width:100%; height:46px; margin-top:16px;
    background:#F2884B; border:0; border-radius:23px;
    color:#fff; font-size:12.5px; font-weight:700; cursor:pointer;
}
.slm-res__dl[hidden] { display:none; }
.slm-res__panel { padding-top:18px; }
.slm-res__panel[hidden] { display:none; }
.slm-swiper { padding-bottom:26px; }
.slm-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.slm-card { text-decoration:none; color:#8A7D72; display:block; }
.slm-card__thumb {
    display:block; width:100%; aspect-ratio:169/110;
    background:#F6EFE7; border:1px solid #E8DCCE; border-radius:14px; overflow:hidden;
}
.slm-card__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
/* 가정연계자료 — 슬라이드마다 앞 2개는 세로형(169×198), 나머지는 기본(169×110) */
#slm-panel-home .slm-grid .slm-card:nth-child(1) .slm-card__thumb,
#slm-panel-home .slm-grid .slm-card:nth-child(2) .slm-card__thumb { aspect-ratio:169/198; }
.slm-card__title {
    display:block; margin-top:8px; font-size:12px; font-weight:500; text-align:center; line-height:1.4; color:#8A7D72;
    overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.slm-swiper .swiper-pagination { bottom:0; }
.slm-swiper .swiper-pagination-bullet-active { background:#F2884B; }

/* =============================== 6. 그림책 =============================== */
.slm-sec-title {
    display:inline-block; margin:32px 20px 12px; padding:7px 16px;
    background:#FFE3A3; border-radius:14px; font-size:14px; font-weight:700; color:#7A5A1F;
}
.slm-books { margin:0 20px; display:flex; flex-direction:column; gap:12px; }
.slm-book { display:flex; gap:18px; align-items:center; background:#fff; border-radius:10px; padding:16px 18px; text-decoration:none; color:inherit; }
.slm-book:not([href]) { cursor:default; }
.slm-book__cover { width:72px; height:auto; object-fit:contain; background:#f1ece5; flex:none; }
.slm-book__info { flex:1; min-width:0; }
.slm-book__title { font-size:14px; font-weight:500; color:#5C5148; margin:0 0 16px; }
.slm-book__meta { font-size:12px; color:#5C5148; margin:6px 0; }
.slm-book__meta b { display:inline-block; width:34px; color:#8C8178; font-weight:500; }

/* =============================== 7. 배너 =============================== */
.slm-banner { margin:24px 20px 0; }
.slm-banner img { width:100%; height:auto; display:block; border-radius:12px; }

/* =============================== 8. 후기 =============================== */
.slm-review-head { margin:32px 20px 12px; }
.slm-review-head__badge {
    display:inline-flex; align-items:center; height:30px; padding:0 16px;
    background:#FFE3A3; border-radius:14px; font-size:14px; font-weight:700; color:#7A5A1F;
}
.slm-review-form { margin:0 20px; background:#fff; border:1.2px solid #F0DFC0; border-radius:14px; padding:12px; position:relative; }
.slm-review-form textarea {
    width:100%; height:52px; resize:none; background:#FDFAF5; border:1px solid #EFE5DA; border-radius:8px;
    padding:10px 12px; font-size:10px; color:#5C5148;
}
.slm-review-form textarea::placeholder { color:#B5A99D; }
.slm-review-form__submit {
    display:block; margin:10px 0 0 auto; width:80px; height:30px;
    background:#F2884B; border:0; border-radius:15px; color:#fff; font-size:10px; font-weight:700; cursor:pointer;
}
.slm-review-list { margin:12px 20px 0; display:flex; flex-direction:column; gap:12px; }
.slm-review { background:#FDFAF5; border-radius:14px; padding:18px 22px; }
.slm-review__meta { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.slm-review__name { font-size:13px; font-weight:600; color:#5C5148; }
.slm-review__bar { width:1px; height:13px; background:#B5A99D; }
.slm-review__date { font-size:12px; color:#B5A99D; }
.slm-review__time { font-size:12px; color:#B5A99D; }
.slm-review__del { margin-left:auto; font-size:11px; color:#B5A99D; text-decoration:none; }
.slm-review__text { font-size:12.5px; line-height:1.5; color:#8A7D72; margin:0; }
.slm-review--hidden { display:none; }
.slm-review-more {
    display:block; width:100%; margin:14px 0 0; padding:8px;
    background:none; border:0; cursor:pointer;
    font-size:12.5px; font-weight:700; color:#F2884B; text-align:center;
}

/* 후기 사진 첨부 (모바일) */
.slm-review-form__foot { display:flex; align-items:center; gap:8px; margin-top:10px; }
.slm-review-form__foot .slm-review-form__submit { margin:0 0 0 auto; }
.slm-review-photo-btn {
    display:inline-flex; align-items:center; gap:4px;
    height:22px; padding:0 10px; box-sizing:border-box; flex:none;
    background:#fff; border:1px solid #F0DFC0; border-radius:15px;
    font-size:10.5px; font-weight:500; line-height:1; color:#8A7D72; cursor:pointer; white-space:nowrap;
}
.slm-review-photo-btn i { font-size:11px; color:#8A7D72; }
.slm-review-photo-btn.is-full { opacity:.45; pointer-events:none; }
/* 파일 input 은 화면에서만 숨김(display:none 아님) — label 직접 탭으로 iOS 사진첩 시트 정상 표시 */
.slm-photo-input { position:absolute; width:1px; height:1px; padding:0; margin:-1px; border:0; opacity:0; overflow:hidden; clip:rect(0 0 0 0); }
.slm-review-photo-max { font-size:10.5px; color:#B5A99D; flex:none; }
.slm-review-preview { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.slm-review-preview:empty { margin-top:0; }
.slm-review-preview__item { position:relative; width:60px; height:60px; border-radius:8px; overflow:hidden; }
.slm-review-preview__item img { width:100%; height:100%; object-fit:cover; display:block; }
.slm-review-preview__del {
    position:absolute; top:2px; right:2px; width:18px; height:18px; padding:0;
    border:0; border-radius:50%; background:rgba(0,0,0,.55); color:#fff;
    font-size:13px; line-height:18px; text-align:center; cursor:pointer;
}
.slm-review__imgs { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.slm-review__img { display:block; width:72px; height:72px; border-radius:8px; overflow:hidden; }
.slm-review__img img { width:100%; height:100%; object-fit:cover; display:block; }

/* =============================== 온보딩 팝업 =============================== */
.slm-onb { position:fixed; inset:0; z-index:12000; display:flex; align-items:center; justify-content:center; padding:16px; }
.slm-onb__dim { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.slm-onb__card {
    position:relative; width:min(340px, 88vw); height:min(420px, 80vh); max-width:88vw; overflow:hidden;
    background:#fff; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.3);
    padding:22px 0 14px; box-sizing:border-box; display:flex; flex-direction:column;
}
.slm-onb__viewport { overflow:hidden; flex:1; min-height:0; }
.slm-onb__track { display:flex; height:100%; transition:transform .3s ease; }
.slm-onb__slide { min-width:100%; box-sizing:border-box; display:flex; flex-direction:column; justify-content:space-between; text-align:center; }
.slm-onb__body { padding:0 22px; }
.slm-onb__step {
    display:inline-flex; align-items:center; justify-content:center;
    height:20px; padding:0 12px; box-sizing:border-box;
    background:#FF7A3D; color:#fff; border-radius:20px;
    font-size:12px; font-weight:700; margin-bottom:10px;
}
.slm-onb__title { font-size:17px; font-weight:700; line-height:1.4; color:#2B2B2B; margin:0 0 7px; }
.slm-onb__desc { font-size:12.5px; font-weight:500; line-height:1.5; color:#424242; margin:0 0 12px; }
.slm-onb__desc b { color:#FF7A3D; font-weight:700; }
.slm-onb__img { flex:none; width:100%; aspect-ratio:2501 / 1412.33; overflow:hidden; background:#F6EFE7; }
.slm-onb__img img { display:block; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; user-select:none; pointer-events:none; }
.slm-onb__dots { display:flex; align-items:center; justify-content:center; gap:7px; padding:10px 0 0; }
.slm-onb__dot { width:8px; height:8px; border-radius:50%; background:#D4D4D4; cursor:pointer; transition:all .2s; }
.slm-onb__dot.is-active { width:10px; height:10px; background:#FF7A3D; }
.slm-onb__foot { display:flex; align-items:center; justify-content:space-between; padding:10px 22px 0; }
.slm-onb__skip { background:none; border:0; color:#AAAAAA; font-size:12.5px; font-weight:500; cursor:pointer; padding:6px 2px; }
.slm-onb__next {
    display:inline-flex; align-items:center; justify-content:center;
    height:40px; padding:0 22px; box-sizing:border-box;
    background:#FF7A3D; border:0; border-radius:18px; color:#fff;
    font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap;
}

/* =============================== 멀티회원 안내 팝업 =============================== */
.slm-member-modal { position:fixed; inset:0; z-index:10001; display:flex; align-items:center; justify-content:center; }
.slm-member-modal[hidden] { display:none; }
.slm-member-dim { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.slm-member-box {
    position:relative; z-index:1; width:300px; max-width:88vw;
    background:#fff; border-radius:16px; padding:32px 22px 20px; text-align:center;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.slm-member-close { position:absolute; top:12px; right:14px; width:24px; height:24px; border:0; background:none; color:#B5A99D; font-size:20px; line-height:1; cursor:pointer; }
.slm-member-icon {
    width:50px; height:50px; margin:0 auto 14px;
    display:flex; align-items:center; justify-content:center;
    background:#FFF0CC; border-radius:50%; color:#F2884B; font-size:20px;
}
.slm-member-title { font-size:16px; font-weight:700; color:#3A3A3A; line-height:1.45; margin:0 0 8px; }
.slm-member-desc { font-size:12px; color:#777; line-height:1.5; margin:0 0 18px; }
.slm-member-btns { display:flex; gap:8px; }
.slm-member-go,
.slm-member-go:link,
.slm-member-go:visited,
.slm-member-go:hover {
    flex:1; height:42px; line-height:42px; text-align:center;
    background:#FF7A3D; border-radius:21px; color:#fff; font-size:13px; font-weight:700; text-decoration:none;
}
.slm-member-cancel {
    flex:none; padding:0 22px; height:42px;
    background:#F7F7F7; border:1.5px solid #BFBFBF; border-radius:21px;
    color:#8A7D72; font-size:13px; font-weight:500; cursor:pointer;
}