/* 회원 화면 — 로그인 · 회원가입 · 비밀번호 찾기 ═══════════════════════
 *   유학센터 로그인 화면과 같은 짜임이다: 흰 바탕 위에 그림자 진 카드 하나,
 *   그 안에서 제목 → 입력칸 → 큰 단추 순으로 세로로 내려간다.
 *   이 세 화면만 쓰는 규칙이라 chrome.css 에 넣지 않는다 — 나머지 여덟
 *   화면이 안 쓰는 규칙을 같이 받아 갈 이유가 없다.
 * ═══════════════════════════════════════════════════════════════════ */
/* 바탕은 옅은 회색이다. 흰 카드가 그 위에 떠 있어야 카드 경계가 읽힌다 —
   흰 바탕에 흰 카드면 테두리 한 줄로만 갈린다.
   카드 밖은 비워 둔다 — 로그인은 곁눈질할 것이 없는 화면이다. */
/* 위 여백 140px 은 로그인처럼 칸 몇 개짜리 화면을 화면 가운데로 끌어올리려고
   준 값이다. 장바구니·주문서처럼 아래로 긴 화면에서는 그만큼 제목이 내려가
   첫 화면에서 제목과 담은 것이 같이 안 보였다. 96px 으로 줄인다 —
   머리(고정 66px) 밑으로 한 뼘 띄우는 정도다. */
.auth{flex:1 1 auto;background:var(--n50);
      padding:96px var(--s5)}
/* 그림자 — 테두리만으로는 카드가 바탕에서 떠오르지
   않는다. 색을 칠한 그림자(#EBEFF4)가 아니라 옅은 검정을 쓴다 —
   바탕이 무슨 색이든 그 색이 그대로 어두워질 뿐이라 어디에 놓아도
   맞는다(홈의 카드가 이미 그 규칙을 쓴다). 두 겹인 이유는 아래
   1px 이 종이의 가장자리를, 넓은 쪽이 떠 있는 높이를 맡기 때문이다. */
.acard{width:100%;max-width:480px;margin:0 auto;background:#fff;
       border:1px solid var(--bd-l);border-radius:16px;padding:var(--s10);
       box-shadow:0 1px 2px rgba(28,24,18,.03), 0 4px 14px rgba(28,24,18,.04)}

/* 제목 — 카드 안 첫 줄. 밑줄은 긋지 않는다. 글자 크기와 굵기만으로 충분히
   앞선다 — 줄까지 더하면 제목이 링크처럼 읽힌다. */
.atitle{margin:0;font-size:28px;font-weight:700;color:var(--t01);letter-spacing:-.02em;
        text-align:center}

.alead{margin:var(--s3) 0 0;font-size:14px;line-height:1.7;color:var(--t03);
       text-align:center;word-break:keep-all}
/* 안내가 두 줄 이어지면(장바구니의 '여기에 모입니다' + '이 기기에만 남습니다')
   한 덩어리로 읽혀야 한다. 20px 씩 띄우면 서로 다른 말처럼 갈라져 보였다. */
.alead + .alead{margin-top:var(--s2)}

/* 제목과 첫 칸 사이 — 24px. 제목이 28px 이라 이만큼이면 떨어져 읽힌다. */
.auth form{margin-top:var(--s6)}
/* 칸 사이 — 칸 이름이 없는 화면(로그인 · 비밀번호 찾기)은 16px. 상자만
   이어지니 이만큼이면 갈린다. */
.afield + .afield{margin-top:var(--s4)}
#joinOnly{margin-top:var(--s4)}
/* 이름이 붙는 화면(회원가입 · 주문조회)은 24px. 16px 이면 아래 칸의 이름이
   윗 상자에 붙어 어느 칸의 이름인지 헷갈린다. */
.auth form:has(.alabel.show) .afield + .afield,
.auth form:has(#joinOnly:not([hidden])) .afield + .afield,
.auth form:has(#joinOnly:not([hidden])) #joinOnly{margin-top:var(--s6)}
#joinOnly .afield:first-child{margin-top:0}
.ainput{display:block;width:100%;height:48px;padding:0 16px;
        font:inherit;font-size:15px;color:var(--t01);
        /* 테두리는 레퍼런스와 같은 #DADADA(--bd) 다. --bd-l(#E4E8F1) 은 푸른기가
           돌아 흰 카드 위에서 칸이 잘 안 잡혔다. */
        background:#fff;border:1px solid var(--bd);border-radius:var(--rd8);
        transition:border-color .15s,box-shadow .15s}
.ainput::placeholder{color:var(--t04)}
.ainput:focus{outline:0;border-color:var(--g500);box-shadow:0 0 0 3px rgba(23,165,72,.14)}
/* 칸 밑 안내 — 연락처에만 둔다. 지난 비회원 주문을 계정에 잇는 조건이라
   가입하기 전에 알아야 하는 유일한 글이다. 나머지 칸은 안내 없이 둔다. */
.ahint{margin:var(--s2) 0 0;font-size:12px;line-height:1.6;color:var(--t03);word-break:keep-all}

/* 보조 줄 — 레퍼런스는 왼쪽에 '아이디 저장', 오른쪽에 찾기가 선다.
   우리는 오른쪽 하나뿐이라 그 자리에 붙인다. */
.arow{display:flex;justify-content:flex-end;margin:var(--s3) 0 0}
.arow[hidden],.auth [hidden]{display:none}
.arow button,.arow a{font:inherit;font-size:14px;font-weight:500;color:var(--t02);
             background:none;border:0;padding:2px 0;cursor:pointer}
.arow a{text-decoration:none;line-height:1}
.arow button:hover,.arow a:hover{color:var(--t01)}
.amsg{margin:var(--s4) 0 0;font-size:14px;line-height:1.6;word-break:keep-all;color:var(--t03)}
.amsg.bad{color:#D92D20;font-weight:700}

/* 단추 — 큰 것 하나가 이 화면의 할 일이다. 테두리 단추는 건너가는 자리라
   한 단계 낮춘다(흰 바탕 · 검은 테두리). */
.abtn{display:flex;align-items:center;justify-content:center;width:100%;height:52px;
      font:inherit;font-size:16px;font-weight:700;border-radius:var(--rd8);
      border:1px solid transparent;cursor:pointer;
      transition:background .15s,color .15s,border-color .15s,opacity .15s}
.abtn.p{margin-top:var(--s6);background:var(--g600);color:#fff}
.abtn.p:hover{background:#128a3b}
.abtn.p:disabled{background:var(--bd-l);color:var(--t04);cursor:default}
.abtn.o{background:#fff;color:var(--t01);border-color:var(--t01)}
.abtn.o:hover{background:var(--n50)}
.abtn:focus-visible{outline:2px solid var(--g600);outline-offset:2px}

/* 전환 — 지금 보고 있는 쪽은 통째로 감춘다. 로그인 화면에서 '로그인' 으로
   건너가는 단추는 할 말이 없다. */
.aswitch{margin-top:var(--s8);padding-top:var(--s8);border-top:1px solid var(--bd-l)}
.aopt:has(> [aria-selected="true"]){display:none}
.aopt .q{margin:0 0 var(--s4);font-size:14px;color:var(--t03);text-align:center}

/* 칸 이름 — 회원가입에서만 내놓는다. 로그인은 칸이 둘뿐이라 칸 안의
   안내 글로 무엇을 적는지 충분히 말한다(유학센터도 그렇게 나뉜다).
   가입은 다섯 칸이라 눈이 어디까지 왔는지 알려면 이름이 있어야 한다.
   감출 때도 지우지 않는다 — 읽어 주는 기계에는 늘 남아 있어야 한다. */
.alabel{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
        clip:rect(0 0 0 0);white-space:nowrap;border:0}
.auth form:has(#joinOnly:not([hidden])) .alabel{
        position:static;width:auto;height:auto;margin:0 0 var(--s2);
        clip:auto;overflow:visible;white-space:normal;border:0;
        display:block;font-size:14px;font-weight:700;color:var(--t01)}
/* 필수 별표 — 토스트 색을 쓴다. 이 화면에서 초록은 '해야 하는 것' 쪽이다. */
.req{color:var(--g500)}
.opt{color:var(--t04);font-weight:500}

@media (max-width:640px){
  /* 좁은 화면에서는 140px 을 그대로 쓰지 않는다 — 위아래로 280px 이면
     한 화면(812px)의 3분의 1이 빈자리가 되어 카드가 접힌 아래로 내려간다.
     좌우는 0 으로 두고 안쪽 .wrap 이 16px 을 갖는다 — 둘 다 여백을 주면
     20+20 = 40px 이 되어 카드가 화면 가운데로 몰린다. */
  .auth{padding:var(--s15) 0}
  .auth > .wrap{padding-left:var(--s4);padding-right:var(--s4)}
  .acard{padding:var(--s6) var(--s5) var(--s8);border-radius:12px}
  .atitle{font-size:24px}
}

/* 칸이 하나뿐인 화면에서는 이름을 늘 내놓는다 — 가릴 것이 없다 */
.alabel.show{position:static;width:auto;height:auto;margin:0 0 var(--s2);
        clip:auto;overflow:visible;white-space:normal;border:0;
        display:block;font-size:14px;font-weight:700;color:var(--t01)}

/* 건너가는 단추는 링크일 때도 밑줄 없이 단추로 선다 */
.aswitch .aopt a.abtn{text-decoration:none}

/* ── 주문 조회 ─────────────────────────────────────────────────────────
   회원 화면과 같은 카드를 쓰되, 여기는 찾는 길이 둘이라 탭이 남는다. */
.atabs{display:flex;gap:var(--s2);margin-bottom:var(--s6)}
/* 안내 글 다음에 탭이 오면 사이를 띄운다 — 붙으면 안내가 탭의 설명처럼 읽힌다 */
.alead + .atabs{margin-top:var(--s6)}
/* 고른 쪽은 테두리로 표시한다 — 칠해 두면 그 단추 하나가 카드 안에서
   제일 진한 덩어리가 되어, 정작 눌러야 할 아래 초록 단추보다 앞선다. */
.atabs .tabs-trigger{flex:1 1 0;min-height:44px;font:inherit;font-size:15px;font-weight:500;
        color:var(--t03);background:#fff;border:1px solid var(--bd);
        border-radius:var(--rd8);cursor:pointer;
        transition:border-color .15s,color .15s,font-weight .15s}
.atabs .tabs-trigger:hover{color:var(--t01);border-color:var(--t03)}
.atabs .tabs-trigger[aria-selected="true"]{color:var(--t01);font-weight:700;
        border-color:var(--t01)}
.atabs .tabs-trigger:focus-visible{outline:2px solid var(--g600);outline-offset:2px}
/* 조회가 됐다고 알릴 때의 색 — 안 될 때(빨강)와 짝이다 */
.amsg.ok{color:var(--g600);font-weight:700}
/* 안내 안의 굵은 글과 링크 */
.alead b{color:var(--t02);font-weight:700}
.alead a{color:var(--g600);font-weight:700;text-decoration:none}
.alead a:hover{color:#128a3b}
/* 조회 결과 칸 — 폼이 사라지면 그 여백도 같이 사라지므로 제 여백을 갖는다.
   다만 결과가 아직 없을 때는 접어 둔다: 안 접으면 회색 폼과 꼬리말 사이에
   흰 띠 96px(위 40 + 아래 56)이 남아 화면이 끊겨 보였다. */
.tresult{padding-top:var(--s10)}
.tresult:not(:has(> section:not([hidden]))){padding-top:0;padding-bottom:0}
@media (max-width:640px){ .tresult{padding-top:var(--s6)} }

/* ── 칸별 오류 ─────────────────────────────────────────────────────────
   무엇이 잘못됐는지는 그 칸 옆에서 말한다. 단추 아래 한 줄로 몰면
   "어느 칸 얘기지" 를 찾느라 눈이 위아래로 오간다. 서버가 막는 규칙과
   같은 문구를 쓴다 — 여기서 통과한 것이 저기서 막히면 안 된다. */
.aerr{margin:var(--s2) 0 0;font-size:13px;line-height:1.5;color:#D92D20;
      word-break:keep-all}
.ainput.bad{border-color:#D92D20}
.ainput.bad:focus{border-color:#D92D20;box-shadow:0 0 0 3px rgba(217,45,32,.12)}

/* ── 장바구니 ─────────────────────────────────────────────────────────
   같은 결이되 폭은 본문선 그대로다 — 담은 것과 합계가 나란히 서야 한다.
   그래서 .acard 의 480px 상한을 여기서만 푼다. */
.cartgrid{display:grid;gap:var(--s4);align-items:start}
.cartgrid .acard{max-width:none;margin:0}
/* 장바구니는 1100px 부터 두 칸이다. 900 에서 나눠 봤더니 목록 칸이 441px
   까지, 1024 에서도 이름 칸이 157px 까지 좁아져 이름이 끊겼다. 한 줄에
   사진 · 이름 · 수량 · 값이 다 서야 하는 줄이라 주문서보다 넓은 자리가
   필요하다. */
@media (min-width:1100px){
  .cartgrid{grid-template-columns:minmax(0,1fr) 340px;gap:var(--s6)}
}
/* 합계는 따라다닌다 — 담은 것이 많으면 합계가 화면 밖으로 나가고, 그러면
   얼마인지 보려고 끝까지 내려야 한다. 76px 은 붙어 있는 머리 높이다. */
@media (min-width:900px){
  .sticky-sum{position:sticky;top:76px}
}
/* 카드 안의 작은 제목 — 화면 제목(28px)보다 한참 아래 단계다 */
.asub{margin:0 0 var(--s5);font-size:16px;font-weight:700;color:var(--t01)}
/* 금액 줄 — 이름은 왼쪽, 값은 오른쪽 끝에 맞춘다 */
.sumlist{margin:0;display:grid;gap:var(--s3);font-size:14px}
.sumlist > div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.sumlist dt{color:var(--t03)}
.sumlist dt .s{font-size:12px}
.sumlist dd{margin:0;font-weight:700;color:var(--t01);font-variant-numeric:tabular-nums}
.sumlist .tot{padding-top:var(--s3);border-top:1px solid var(--bd-l)}
.sumlist .tot dt{color:var(--t01);font-weight:700}
.sumlist .tot dd{font-size:18px}
/* 단추 둘이 이어질 때 — 위 단추는 제 여백(24px)을 갖고, 아래는 8px 만 */
.abtn.o.mt{margin-top:var(--s2)}
.ahint.mid{margin-top:var(--s4);text-align:center}
/* 마지막 줄의 아래 선은 지운다 — 카드 안쪽 여백 위에 선만 떠 있으면
   아직 뭔가 더 있는 것처럼 보인다 */
#list > div:last-child{border-bottom:0}

/* ── 주문서 ───────────────────────────────────────────────────────────
   장바구니와 같은 두 칸이다 — 이름만 다르다. */
.ordgrid{display:grid;gap:var(--s4);align-items:start}
.ordgrid .acard{max-width:none;margin:0}
@media (min-width:900px){
  .ordgrid{grid-template-columns:minmax(0,1fr) 340px;gap:var(--s6)}
}
/* 카드 하나만 서는 자리(접수 끝) 도 폭을 풀어 둔다 */
.acard.one{max-width:none}
.asub.big{font-size:20px;margin-top:var(--s4)}
/* 작은 제목과 곁들이는 링크가 한 줄에 선다 */
.asubrow{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s5)}
.asubrow .asub{margin:0}
.asubrow a{margin-left:auto;font-size:13px;font-weight:700;color:var(--g600);
           text-decoration:none}
.asubrow a:hover{color:#128a3b}
/* 단추 둘이 가로로 설 때 — 접수 끝 화면 */
.arow2{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s6)}
.arow2 .abtn{flex:1 1 180px;width:auto;margin-top:0}

/* 입력칸 여럿 — 한 줄에 둘씩, 좁으면 하나씩. 주문서는 칸이 아홉이라
   하나씩 세우면 화면이 두 배로 길어진다. */
/* 안내 글 다음에 칸이 오면 사이를 띄운다 */
.ahint + .flds,.asub + .flds{margin-top:var(--s6)}
/* 칸 수를 폭에 맡기지 않고 못 박는다. auto-fit 으로 두었더니 넓은 화면에서
   네 칸이 서고 둘만 남는 둘째 줄이 생겼다 — 주문서의 칸은 여섯이라 세 칸씩
   두 줄이 맞다. 그리고 칸이 넷이면 하나가 좁아져 어학원 이름이 잘린다.
   가운데 줄을 조금 넓게 둔다: 거기 서는 것이 어학원과 배송 시작 희망일인데,
   둘 다 글이 긴 값이다(학원 이름·'2026-10-13 (화)'). */
.flds{display:grid;grid-template-columns:1fr;gap:var(--s5)}
@media (min-width:640px){ .flds{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* 1.75 는 눈대중이 아니다 — 'CEBU BLUE OCEAN ACADEMY' 가 221px 인데
   1.35 에서는 글자 자리가 218px 이라 세 글자가 잘렸다. 여기서는 261px 다.
   더 긴 이름(CPILS 의 괄호까지 415px)은 어떻게 해도 안 들어간다 — 그런
   이름은 말줄임으로 끊고, 온전한 이름은 칸에 올려 보거나 아래 배송 요일
   줄에서 읽는다. */
@media (min-width:1024px){ .flds{grid-template-columns:1fr 1.75fr 1fr} }
.flds .full{grid-column:1 / -1}
/* 칸 이름 — 다른 화면의 .alabel 과 같은 눈금이다 */
.fld > span{display:block;font-size:14px;font-weight:700;color:var(--t01);
            margin-bottom:var(--s2)}
.fld > span em{font-style:normal;color:var(--g500);margin-left:3px}
/* 16px 은 멋이 아니라 필수다 — iOS 사파리는 16px 보다 작은 입력칸에 손이
   닿으면 화면을 확대하고 되돌려 주지 않는다. 다른 화면의 칸은 15px 인데
   여기만 16px 인 이유가 그것이다. */
.fld input,.fld textarea,.fld select{
      width:100%;min-height:48px;padding:0 16px;font:inherit;font-size:16px;
      color:var(--t01);background:#fff;border:1px solid var(--bd);
      border-radius:var(--rd8);outline:none;
      transition:border-color .15s,box-shadow .15s}
.fld textarea{min-height:84px;padding:12px 16px;resize:vertical}
/* 고르는 칸은 글이 길다(어학원 이름). 좌우 여백을 줄여 글자가 들어갈 자리를
   벌리고, 그래도 넘치면 말줄임으로 끊는다 — 가운데서 뚝 끊기면 다른 학원과
   구별이 안 된다. 전체 이름은 칸에 올려 보면 나오고(title), 아래 배송 요일
   줄에도 그대로 적힌다. */
.fld select{padding:0 34px 0 12px;text-overflow:ellipsis}
.fld input::placeholder,.fld textarea::placeholder{color:var(--t04)}
.fld input:focus,.fld textarea:focus,.fld select:focus{
      border-color:var(--g500);box-shadow:0 0 0 3px rgba(23,165,72,.14)}
/* 빠진 칸은 눈에 띄어야 한다 — 목록으로만 알려 주면 어디인지 찾아야 한다 */
.fld input.bad,.fld textarea.bad,.fld select.bad{
      border-color:#D92D20;box-shadow:0 0 0 3px rgba(217,45,32,.12)}

/* 카드 안에 덧붙이는 회색 안내 상자 */
.anote{margin-top:var(--s6);background:var(--n50);border:1px solid var(--bd-l);
       border-radius:var(--rd8);padding:var(--s4) var(--s5)}
.anote b{display:block;font-size:14px;font-weight:700;color:var(--t01);
         margin-bottom:var(--s1)}
.anote span{font-size:12px;line-height:1.6;color:var(--t03);word-break:keep-all}
/* 안내 글 안의 링크도 다른 글과 구분되어야 한다 — 밑줄 대신 색과 굵기로 */
.ahint a{color:var(--g600);font-weight:700;text-decoration:none}
.ahint a:hover{color:#128a3b}
.ahint b{color:var(--t02);font-weight:700}
/* 서버가 배송일을 옮겼을 때만 나오는 줄 — 적은 날과 다른 날로 들어갔다는
   말이라 다른 안내보다 진하게 둔다 */
.alead.moved{color:var(--t01);font-weight:700}

/* ── 장바구니 목록 ─────────────────────────────────────────────────────
   상품 하나가 카드 한 장을 차지하던 것을 줄 하나로 바꾼다. 여러 개를
   담았을 때 위에서 아래로 훑어 읽는 것이 장바구니에서 할 일이라,
   칸을 나누는 것은 테두리 한 줄이면 된다. */
.cartcard{padding:0}                     /* 줄이 카드 끝까지 닿는다 */
.cartcard > *{padding-left:var(--s6);padding-right:var(--s6)}

/* 관리 줄 — 전체선택과 선택삭제. 목록의 머리다. */
.clbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
       padding-top:var(--s5);padding-bottom:var(--s5);
       border-bottom:1px solid var(--bd-l)}
.cchk{display:inline-flex;align-items:center;gap:var(--s3);cursor:pointer;
      /* 손가락으로 누를 자리를 칸 밖까지 넓힌다 */
      min-height:44px}
.cchk input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--g600);cursor:pointer}
/* 일부만 고른 상태(줄표)는 회색으로 둔다. 초록으로 칠하면 체크(✓)와
   줄표(−)가 18px 에서 구분이 안 돼 "전체선택이 눌렸다" 로 읽힌다. */
.cchk input:indeterminate{accent-color:var(--t04)}
.cchk.call span{font-size:14px;font-weight:700;color:var(--t01)}
.cchk.call b{font-weight:500;color:var(--t03)}
/* 글자 단추 — 삭제 · 선택삭제. 빼는 일은 강조하지 않는다. */
.clink{font:inherit;font-size:14px;color:var(--t03);background:none;border:0;
       padding:6px 2px;cursor:pointer;transition:color .15s}
.clink:hover:not(:disabled){color:var(--t01)}
.clink:disabled{color:var(--t04);cursor:default}
.clink:focus-visible{outline:2px solid var(--g600);outline-offset:2px;border-radius:2px}

/* 상품 한 줄 — 고르기 · 사진 · 이름 · 수량 · 값.
   글자 크기는 DESIGN.md 의 눈금을 그대로 쓴다: 이름 base(16) · 분류
   sm(14) · 보증금 xs(13) · 값 lg(18). 합계 칸은 주문서와 같은 값이다
   (sumlist 14 · 합계 18) — 두 화면을 오갈 때 같은 숫자가 같은 크기로
   보여야 한다. */
.crow{display:grid;align-items:center;gap:var(--s4);
      grid-template-columns:auto 88px minmax(0,1fr) auto auto;
      padding-top:var(--s5);padding-bottom:var(--s5);
      border-bottom:1px solid var(--bd-l)}
.crow .cchk{min-height:0}
.cthumb{display:block;width:88px;height:88px;border-radius:var(--rd8);
        overflow:hidden;background:var(--n50);position:relative}
.cthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cinfo{min-width:0}                      /* 없으면 긴 이름이 칸을 밀어낸다 */
.cnm{display:block;font-size:16px;font-weight:700;color:var(--t01);
     line-height:1.4;text-decoration:none;word-break:keep-all}
.cnm:hover{color:var(--g600)}
.cmeta{margin:var(--s1) 0 0;font-size:14px;color:var(--t03)}
.cdep{margin:var(--s1) 0 0;font-size:13px;color:var(--t03)}
.cqty{flex:0 0 auto}
.cpay{text-align:right;min-width:96px}
.cprice{margin:0;font-size:18px;font-weight:700;color:var(--t01);
        font-variant-numeric:tabular-nums;white-space:nowrap}
.cpay .cdel{margin-top:var(--s1)}

/* 더 담으러 가는 길 — 목록 아래. 주문 진행(오른쪽 칸)과 섞지 않는다. */
.cmore{padding-top:var(--s6);padding-bottom:var(--s6)}
.cmore .abtn{width:auto;display:inline-flex;padding:0 var(--s6);min-height:44px;height:auto}


/* 빈 장바구니 — 합계 칸은 아예 안 그린다(위 마크업에서 통째로 감춘다) */
.cempty{text-align:center}
.cempty .alead{margin-top:var(--s4)}
.cempty .arow2{justify-content:center}
.cempty .arow2 .abtn{flex:0 0 auto;padding:0 var(--s8)}

@media (max-width:640px){
  .cartcard > *{padding-left:var(--s5);padding-right:var(--s5)}
  /* 좁은 화면에서는 줄을 두 단으로 접는다. 위는 고르기 · 사진 · 이름,
     아래는 수량과 값이다 — 가로로 다섯 칸을 유지하면 이름이 두 글자씩
     끊긴다. 사진은 한 단 작게 둔다. */
  .crow{grid-template-columns:auto 76px minmax(0,1fr);gap:var(--s3) var(--s4)}
  .cthumb{width:76px;height:76px}
  .cqty{grid-column:2 / -1;justify-self:start}
  .cpay{grid-column:2 / -1;justify-self:start;text-align:left;min-width:0;
        display:flex;align-items:baseline;gap:var(--s4);margin-top:calc(var(--s2) * -1)}
  .cpay .cdel{margin-top:0}
}

/* 알림 알약과 아래 카드 사이 — 안 띄우면 알약이 카드 위에 얹힌 것처럼
   붙는다. 알약이 없을 때(회원 정보를 못 읽었을 때)도 같은 자리를 잡게
   여백은 아래 칸이 갖는다. */
.cartgrid,.cempty{margin-top:var(--s6)}

/* 장바구니는 위 여백을 줄인다. 140px 은 카드 한 장짜리 화면(로그인 · 찾기)
   에서 가운데를 잡아 주는 값인데, 여기는 훑어 내려가는 목록이라 첫 줄이
   접힌 화면 밖으로 밀린다. */
.cartpage{padding-top:var(--s15)}
@media (max-width:640px){ .cartpage{padding-top:var(--s10)} }