/* ============================================================ refine.css — 기존 디자인 유지. 네 가지만 다듬는다. v2.css 뒤에 로드. 이 파일만 지우면 원래대로 돌아온다. ① 반지름 11종 → 2종 (알약 999px 유지 + 나머지 14px) ② 브랜드색 135° 그라데이션 → 단색 (밝기 유지한 중간값) ③ 사진 모서리·그림자 완화 (없애지 않고 줄인다) ④ theme-color 는 각 HTML 에 추가 ============================================================ */ /* ② 그라데이션 두 색 → 한 색. #3AACE8~#1f8fd0 의 중간값이라 밝기는 그대로 */ :root{ --grad:#2D9EDC; } /* ① 반지름 통일 — 알약(999px)은 손대지 않는다 */ .dropmenu{border-radius:14px} /* was 14px */ .dropmenu a{border-radius:14px} /* was 9px */ .hgal .main{border-radius:14px} /* was 22px */ .hgal .badge{border-radius:14px} /* was 16px */ .card .ic{border-radius:14px} /* was 14px */ .split .ph{border-radius:14px} /* was 20px */ .checks .c{border-radius:14px} /* was 8px */ /* Pillars */ .pillar{border-radius:14px} /* was 16px */ .gal figure{border-radius:14px} /* was 14px */ /* FAQ */ .faq details{border-radius:14px} /* was 14px */ .ftrust .b{border-radius:14px} /* was 10px */ .leadform{border-radius:14px} /* was 22px */ .field input,.field select{border-radius:14px} /* was 11px */ /* Program cards — hover image swap */ .swapcard{border-radius:14px} /* was 18px */ .stepcard{border-radius:14px} /* was 16px */ .stepcard .sic{border-radius:14px} /* was 14px */ .tcard .to .arr{border-radius:14px} /* was 7px */ .proofstrip figure{border-radius:14px} /* was 16px */ .phototrio figure{border-radius:14px} /* was 20px */ .agechips button{border-radius:14px} /* was 11px */ /* ③ 사진: 떠 있지 않게. 깊이는 남기고 부유감만 줄인다 */ .hgal .main{box-shadow:0 18px 40px rgba(12,20,32,.13)} /* was 0 34px 70px .22 */ .split .ph{box-shadow:0 14px 32px rgba(12,20,32,.10)} /* was 0 24px 50px .16 */ /* 작은 요소(24~38px)는 14px 을 주면 거의 원이 된다. 한 단계 작게. */ .checks .c,.ftrust .b,.tcard .to .arr{border-radius:6px} /* ============================================================ 프로그램 카드 — Apple(apple.com/ca/airpods-pro) 방식. 실측: ul.card-set.caption-tile-set 의 항목은 radius 0 / shadow none / 배경·테두리 없음, 사진 372x580(2:3), 본문 #6E6E73 17px·행간 25px·자간 -0.022em, 사진과 간격 13.6px, 그리드 간격 20px. 사진 모서리는 사장님 요청으로 둥글게(우리 반지름 체계의 14px). ============================================================ */ .pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 20px} .pcard{display:block;background:none;border:0;box-shadow:none;border-radius:0;color:inherit} .pc-img{position:relative;aspect-ratio:2/3;overflow:hidden;border-radius:14px;background:#f2f2f4} .pc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .3s ease} .pc-img .h{opacity:0} .pcard:hover .pc-img .h{opacity:1} .pc-t{font-size:17px;line-height:25px;letter-spacing:-.022em;color:#6E6E73;margin-top:14px} .pc-t b{color:#111722;font-weight:700} .pc-a{color:#8a8a8f} .pc-l{display:inline-block;font-size:.9rem;font-weight:600;color:var(--blue);margin-top:9px;letter-spacing:-.01em} .pc-lx{display:flex;flex-direction:column;gap:2px} @media (max-width:980px){.pgrid{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.pgrid{grid-template-columns:1fr}} /* 생일파티 사진만 10% 확대 (사장님 요청) — 인물이 조금 더 크게 잡힌다 */ .pc-img img.zoom10{transform:scale(1.1);transform-origin:center} /* ============================================================ 프로그램 카드 등장 — 아래에서 떠오르며 한 장씩 레퍼런스: apple.com/ca/apple-watch-ultra-3 실측 (초기 opacity:0 / translateY(30px), transition 은 none 인데 카드마다 값이 달랐다 → 트리거가 아니라 스크롤 스크럽이다) 값은 샌드박스에서 12가지를 만들어 측정해 골랐다. 판정 기준 셋: ① 1번↔4번 opacity 격차가 커야 「한 장씩」으로 보인다 ② 순서가 뒤집히면 안 된다 ③ 섹션이 화면 중앙(읽는 위치)에 왔을 때는 이미 다 나타나 있어야 한다 첫 시도(30px·시차 4%)는 격차가 0.27 뿐이라 동시에 보였다. 시차를 키우려고 끝나는 지점을 뒤로 밀었더니 ③이 깨졌다(4번이 0.29 에 머묾). 또 entry% 와 cover% 를 섞어 쓰자 기준 길이가 달라 2번이 1번보다 먼저 끝났다. → 단위를 cover 로 통일하고, 시작만 어긋내고 끝은 모두 cover 46% 이전으로. 최종 채택: 이동 100px, 시차 8%, 구간 22%. 격차 1.00 / 순서위반 0 / 중앙에서 완성. 요소 중앙이 화면 중앙에 오는 시점이 cover 50% 라 그 전에 끝내야 한다. ============================================================ */ @keyframes pcardIn{from{opacity:0;transform:translateY(100px)}to{opacity:1;transform:none}} @keyframes pcardFade{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ .pcard{ will-change:opacity,transform; animation:pcardIn linear both; animation-timeline:view(); animation-range:cover 0% cover 22%; } .pcard:nth-child(2){animation-range:cover 8% cover 30%} .pcard:nth-child(3){animation-range:cover 16% cover 38%} .pcard:nth-child(4){animation-range:cover 24% cover 46%} /* 좁은 화면에서는 카드가 세로로 쌓여 각자 다른 때에 들어온다. 거기에 시차까지 더하면 마지막 카드가 너무 늦어지므로 되돌린다. */ @media (max-width:980px){ .pcard,.pcard:nth-child(2),.pcard:nth-child(3),.pcard:nth-child(4){ animation-range:cover 0% cover 26%} } } } /* 움직임을 줄인 설정: 위치 이동 없이 흐릿하게만 */ @media (prefers-reduced-motion:reduce){ @supports (animation-timeline:view()){ .pcard{animation:pcardFade linear both;animation-timeline:view();animation-range:cover 0% cover 30%} } } /* 한 번 나타난 카드는 그 상태로 굳는다 — 스크롤을 올려도 되감기지 않는다. .is-shown 은 위 스크립트가 「다 나타난 뒤」에만 붙인다. */ .pcard.is-shown{animation:none;opacity:1;transform:none} /* ============================================================ 스토리 사진 확장 — 작은 둥근 프레임에서 시작해 화면을 꽉 채운다 레퍼런스: apple.com/ca/macbook-pro 실측. Apple 은 폭을 바꾸지 않는다. 미디어는 원래 크기 그대로 두고 clip-path: inset(6.25% 20.53% round 40px) 로 「보이는 창」만 잘라낸다. inset 이 0 으로 줄면 꽉 차고, round 가 0 이 되면 모서리가 펴진다. 폭·높이를 건드리지 않으므로 레이아웃 재계산이 없다. 타이밍(2026-08-09 실측 후 조정): 1440x900 에서 cover 0% 는 scrollY 723, 스테이지가 상단에 고정되는 것은 1623(= cover 11%)이다. 처음엔 cover 7% 에서 끝냈는데, 그러면 확장이 스크롤 567px 만에 끝나고 사진이 고정되기 323px 전에 이미 완료된다 — 보는 사람이 볼 준비가 되기 전에 끝나서 커지는 것이 안 보인다는 지적을 받았다. cover 15% 로 늘려 고정된 뒤에도 계속 커지게 했다. 확장 구간 567 → 1215px. ============================================================ */ @keyframes syExpand{ from{clip-path:inset(3.5% 11% round 30px)} to {clip-path:inset(0% 0% round 0px)} } @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ .sy-stage{ animation:syExpand linear both; animation-timeline:--story; animation-range:cover 0% cover 15%; } } } /* ============================================================ 민짜 아이콘 — 파란 사각형을 없애고 선 아이콘에 색만 준다 레퍼런스: apple.com/ca/macbook-pro 환경 카드(각 아이콘이 다른 색의 선 아이콘) 처음엔 .sixres 로 「Six results」 6개에만 걸었는데, 그러면 같은 홈 화면의 「More than kicks」 3개는 박스형으로 남아 한 페이지에 아이콘 표현이 두 가지가 된다. 2026-08-07 사장님 결정으로 두 섹션을 맞추면서 이름을 .flatic 으로 바꿨다(6개 전용 이름이면 3개짜리에 붙일 수 없다). 색은 nth-child 라 3개짜리는 앞 세 색을 물려받는다. 다른 페이지의 .card .ic 는 아직 박스형이다 — 홈부터 하나씩 바꾸는 중. ============================================================ */ .flatic .ic{width:auto;height:auto;background:none;border-radius:0;display:block;margin-bottom:14px} .flatic .ic .ico{width:34px;height:34px} .flatic .card:nth-child(1) .ic{color:#1B84C4} .flatic .card:nth-child(2) .ic{color:#2AA3B8} .flatic .card:nth-child(3) .ic{color:#3E9E6B} .flatic .card:nth-child(4) .ic{color:#E08A2B} .flatic .card:nth-child(5) .ic{color:#D9605B} .flatic .card:nth-child(6) .ic{color:#6B63C9} /* 프로그램 페이지(u-star·u-kids·u-teenadult·camp)는 카드 그리드가 페이지마다 2~3개다. 전부 6색을 돌리면 그리드마다 파랑부터 다시 시작해 페이지 안에서 파랑이 여러 번 「첫 색」으로 나오고, 「우리 애가 말을 안 들으면?」 같은 걱정 FAQ 에도 색이 붙는다. 그래서 6개짜리 대표 그리드만 색을 다 쓰고, 뒤따르는 그리드는 파랑 하나로 간다 (사장님 결정 2026-08-07). nth-child 규칙과 특정도가 같으므로 반드시 뒤에 와야 이긴다. */ .flatic.mono .card .ic{color:#1B84C4} /* schedule 의 「3 steps to start」는 칸 안에 아이콘이 아니라 숫자 1·2·3 이 들어 있다. 파란 박스가 장식이 아니라 단계 배지였어서, 박스를 빼자 23px·굵기 400 의 가는 숫자만 남아 순서로 안 읽혔다. 박스 없이 굵고 크게 세워 단계임을 다시 드러낸다(사장님 결정). */ .flatic .ic.num{font-size:32px;font-weight:800;line-height:1;letter-spacing:-.03em;margin-bottom:12px} /* ============================================================ 푸터 주소 한 줄 유지 1440px 에서 칸이 305px 인데 주소는 307px 이 필요해 2px 차이로 줄바꿈됐다. 비율만 키우면 창이 좁아질 때 또 깨지므로, 연락처 칸에 최소 폭을 보장하고 좁은 화면에서는 칸 수를 먼저 줄인다(3열 → 2열 → 1열). nowrap 은 칸 폭이 확보된 뒤에만 의미가 있으므로 함께 둔다. ============================================================ */ footer.site .fgrid{grid-template-columns:1.4fr 1fr minmax(320px,1.05fr)} footer.site .fgrid a[href*="maps.google"]{white-space:nowrap} @media(max-width:900px){ footer.site .fgrid{grid-template-columns:1fr 1fr} } @media(max-width:760px){ footer.site .fgrid{grid-template-columns:1fr} } /* 스토리 카드가 아주 좁은 화면(≈320px)에서 화면 밖으로 밀려나던 것. left/right 7% 오프셋에 max-width:34ch 가 더해지면 합이 화면을 넘는다. 34ch 를 유지하되 무대 폭의 86% 를 넘지 못하게 묶는다(양쪽 7% 를 남긴다). */ .sy-card{max-width:min(34ch, 86%)} /* ============================================================ 히어로 백투스쿨 (2026-08-08, 개학 9/8 까지 한시적) 문제는 문구가 아니라 위치였다 — 「School-ready?」 큰 글자가 문서 928px 에 있어 창이 640~900px 인 어떤 노트북에서도 첫 화면에 안 나왔다. 그래서 시즌 신호를 히어로 안으로 올린다. 조사 근거(115개 사이트를 받아 h1 을 뽑은 49개 기준): · 결과·변화를 말한 h1 은 0/49. 전부 자기 이름을 쓴다. 무술 5곳은 「…'s Premier Martial Arts Facility For All Ages」로 글자까지 같았다(같은 제작사 템플릿). 우리 「Where kids change.」 는 3단어에 결과를 말한다 → H1 은 건드리지 않는다. · 히어로에 시즌을 쓴 곳은 2/49(4%). 흔치 않은 건 위험이 아니라 빈자리로 봤다. 시즌이 끝나면 이 블록과 index.html 의 .s-tag / .s-date 를 지우면 원래대로다. ============================================================ */ .s-tag{display:inline-block;background:var(--grad);color:#fff;font-weight:900; letter-spacing:2px;padding:3px 9px;border-radius:5px;margin-right:10px; font-size:.66rem;vertical-align:1px} .s-date{margin:16px 0 0;font-size:.95rem;line-height:1.55;color:#3f4d5c;max-width:52ch} .s-date b{color:#111722} @media (max-width:760px){ .s-tag{display:block;width:max-content;margin:0 0 8px} .s-date{font-size:.9rem;margin-top:14px} } /* 배너를 신뢰바 앞으로 옮기면서 여백도 줄인다(사장님 결정). .pad 가 위아래 74px 을 주는데 히어로가 이미 길어서 그대로면 큰 글자가 843px 에 앉는다. 시즌 종료 시 이 블록과 함께 지우고, index.html 의 배너 블록을 신뢰바 뒤로 되돌리면 원래대로다. */ .b2s{padding-top:30px;padding-bottom:38px} .b2s .b2s-h{margin-top:6px} .b2s .b2s-s{margin:10px 0 18px} /* ============================================================ 나이 칩을 버튼처럼 (2026-08-08) 히어로에서 둘째 버튼 「Find a class」를 뺐다 — 바로 아래 나이 칩이 같은 일(프로그램 고르기)을 하는데 두 번 물어보고 있었다. 다만 칩이 작고 연해서 버튼으로 안 읽히면 「그냥 둘러보기」 길이 사라진다. 그래서 뺀 만큼 칩을 키운다. 이건 시즌과 무관한 변경이라 백투스쿨 블록과 따로 둔다. ============================================================ */ .agepick a{border-width:2px;font-weight:800;padding:11px 20px;font-size:1.02rem} @media (max-width:560px){ .agepick a{padding:10px 16px;font-size:.98rem} /* 칩을 키우니 좁은 화면에서 필요한 폭이 316px 인데 253px 뿐이라 「13+」가 혼자 내려갔다. 라벨을 제 줄로 올려 칩 3개가 한 줄에 붙게 한다. */ .agepick-lbl{flex:0 0 100%} } /* 캠프는 여름에만 한다(Pro-D·겨울 캠프 없음, 사장님 확인 2026-08-09). 시즌이 끝나면 이 페이지는 열 달 동안 지금 못 사는 것을 파는 페이지가 된다. 언제 하는지 한 줄로 밝혀 방문자가 헛걸음하지 않게 한다. 히어로 본문보다 작고 조용하게. */ .phero .camp-when{font-size:.92rem;opacity:.8;margin-top:10px} /* ============================================================ 스토리 카드 세로 위치 — 모바일 (2026-08-09, 사장님 폰 스크린샷 확인) ① Confident 는 화면 정중앙이라 아이 얼굴과 상체를 덮고 있었다. 허벅지 높이로 내려 얼굴을 비켜준다. ② Focused · Grit · Respect 는 bottom:9% 였는데, 아이폰 사파리의 아래쪽 주소창이 그 자리를 덮어 인용문 끝줄이 잘렸다. 위로 올린다. 주소창·홈 인디케이터 높이는 기기마다 다르므로 env(safe-area-inset-bottom) 으로 한 번 더 비켜선다(그 값이 없는 기기에서는 0px 이라 영향 없음). ③ Brave 는 정중앙 그대로 둔다 — 사장님 지적에 없었다. 위치가 index.html 에 인라인 style 로 박혀 있어 !important 가 필요하다. 되돌리려면 이 블록만 지우면 원래대로 돌아온다. */ @media (max-width:760px){ .sy-card[data-c='0']{ /* Confident — 내린다 */ top:auto!important; transform:none!important; bottom:calc(15% + env(safe-area-inset-bottom,0px))!important; } .sy-card[data-c='1'], /* Focused — 올린다 */ .sy-card[data-c='2'], /* Grit — 올린다 */ .sy-card[data-c='4']{ /* Respect — 올린다 */ bottom:calc(22% + env(safe-area-inset-bottom,0px))!important; } } /* ============================================================ 스토리 구간 대체 경로 — 스크롤 연동 애니메이션이 없는 브라우저 (2026-08-09, 사장님 아이폰에서 발견) 원래 CSS 는 @supports (animation-timeline:view()) 안에서만 카드를 겹쳐 놓고 한 장면씩 넘긴다. 구형 iOS 사파리처럼 그걸 모르는 브라우저에서는 그 블록이 통째로 무시돼, 글 다섯 개가 사진 한 장 위에 세로로 쌓인 채 전부 보였다. 사장님 폰이 정확히 그 상태였다. index.html 의 스크립트가 지원 여부를 보고 .sy-js 를 붙이면, 아래 규칙이 @supports 블록과 같은 배치를 만들어 주고 JS 가 투명도를 직접 굴린다. */ .sy-js .sy-copy{position:absolute;inset:0;padding:0;display:block} .sy-js .sy-card{position:absolute;opacity:0} /* JS 가 모는 동안에는 CSS 애니메이션을 끈다. 진짜 대상 브라우저에는 애초에 안 도는 것들이라 거기서는 아무 차이가 없다. 다만 이게 없으면 ?syjs=1 로 시험할 때 — 지원되는 브라우저에서 — 돌고 있는 CSS 애니메이션이 JS 가 넣은 값을 덮어버려 시험이 거짓으로 통과한다. 시험이 실물과 같아야 한다. */ .sy-js .sy-card, .sy-js .sy-l, .sy-js .sy-l img, .sy-js .sy-scrim, .sy-js .sy-stage{animation-name:none!important} /* 대체 경로에서는 어둡게 까는 막(syScrim)도 안 돌아 흰 글씨가 밝은 사진 위에 그대로 얹혔다 — 사장님 스크린샷에서 글이 잘 안 읽히던 이유다. 고정으로 깐다. */ .sy-js .sy-scrim{opacity:.42} /* JS 가 안 도는 경우(「동작 줄이기」가 켜진 구형 사파리)에도 글은 읽혀야 한다 */ @supports not (animation-timeline:view()){ .sy-scrim{opacity:.42} } /* ============================================================ 무대 높이는 화면을 따라가고, 스크롤 길이는 얼려 둔다 (2026-08-09) index.html 의 --vh 는 이제 가로가 바뀔 때만 다시 잡는다. 폰 주소창이 접혔다 펴질 때마다 스토리 아래 내용이 640px 씩 튀던 것을 막기 위해서다. 그런데 무대(.sy-stage)까지 그 얼어붙은 값을 쓰면, 주소창이 나타났을 때 무대가 화면보다 커져 바닥이 화면 밖으로 나간다. 카드는 바닥 기준(bottom:22%) 으로 놓여 있으므로 그만큼 아래로 밀려 다시 잘린다. 그래서 무대만 dvh 로 실제 화면 높이를 따라가게 한다. dvh 는 주소창 상태에 따라 같이 변하는 단위다. 스크롤 길이(.sy 의 --vh * 8)는 그대로 얼어 있으므로 문서 높이는 흔들리지 않는다. dvh 를 모르는 브라우저는 기존 --vh 를 쓴다. 같은 .sy-stage 규칙이 index.html 안쪽 style 태그에도 있고 그쪽이 문서에서 더 뒤에 온다. 특정도가 같으면 뒤가 이기므로, 여기서는 .sy 를 붙여 한 단계 올려야 실제로 먹는다 — 처음엔 이걸 빠뜨려 무대가 844 로 남아 있었다. */ @supports (height:100dvh){ .sy .sy-stage{height:100dvh} }