/* 전달본 이후에 정해진 디자인 변경만 모읍니다 — 반드시 **맨 뒤**에 실립니다. 왜 별도 파일인가 ---------------- 전달본 CSS(tokens~appendix 13개)는 확정 디자인 원본과 같아야 합니다(AGENTS 규칙). 그래서 그 파일들은 건드리지 않고, 이후에 바뀐 것만 여기 모아 마지막에 덮습니다. ua-headings.css 가 맨 앞에서 브라우저 기본값을 되살리는 것과 짝입니다. 규칙 ---- · 전달본과 **같은 선택자**를 쓰고, 순서(맨 뒤)로 이깁니다. 명시도를 억지로 올리지 않습니다 — 올려두면 나중에 전달본이 갱신돼도 이 파일이 계속 이깁니다. · 항목마다 "누가 언제 왜" 를 적습니다. 근거가 없으면 지울 수 없게 됩니다. */ /* 합격후기 목록 — 카드 호버 배경 제거 (2026-08-07, 디자인 요청) 전달본 review.css 는 .review-row:hover 에서 배경을 --surface-sunken 으로 바꿉니다. 카드가 링크가 아니라 눌리는 느낌만 주고 실제로는 아무 일도 일어나지 않아 빼기로 했습니다. 기본 배경(--surface)으로 되돌립니다. */ .review-row:hover { background: var(--surface) } /* ========================================================================== 체크박스 통일 (2026-08-07, 디자인 요청) Figma checkbox — https://figma.com/design/jIRU9Nf4klrKpzgtdhW3br?node-id=882-2236 882:2233 기본 · 882:2230 선택 — 24x24 · radius 4 · 1px 테두리 · 16px 체크 전달본은 자리마다 모양이 갈려 있었습니다. input[type=checkbox] 20px · 1px --line (로그인·가입·약관) .select-toggle__box 15px · 테두리 없음 (수강신청 과목 선택) .filter-item::before 16px · 1.5px (수강신청 사이드바) .fsheet__item::before 18px · 1.5px (수강신청 필터 시트) 모양(테두리 1px · radius 4 · 가운데 체크)은 시안을 따르되 두 가지는 사이트에 맞춰 조정했습니다. 크기 시안 24px → 18px (체크 12px). 14px 본문 옆에 놓이는 자리가 대부분이고 사이드바 필터처럼 촘촘한 목록도 있어 줄였습니다. 체크 아이콘은 시안 비율(2/3)을 그대로 유지합니다. 색 시안의 raw hex(#D9D9D9 / #007BFF) 대신 사이트 토큰(--line / --blue). 팔레트 일관성을 위한 것으로, 전달본이 이미 내린 판단과 같은 방향입니다(account.css 주석 참고). ========================================================================== */ :root { /* 체크 아이콘 — account.css 가 쓰던 것과 같은 SVG 입니다 */ --cb-check-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M10.9706 4.97C11.1115 4.83589 11.299 4.76175 11.4935 4.76322C11.688 4.76469 11.8743 4.84166 12.0131 4.97789C12.1519 5.11412 12.2324 5.29895 12.2375 5.49338C12.2427 5.68781 12.1721 5.87663 12.0406 6.02L8.05065 11.01C7.98204 11.0839 7.89923 11.1432 7.80718 11.1844C7.71513 11.2255 7.61572 11.2477 7.5149 11.2496C7.41408 11.2514 7.31392 11.233 7.2204 11.1952C7.12689 11.1575 7.04194 11.1013 6.97065 11.03L4.32465 8.384C4.25096 8.31534 4.19186 8.23254 4.15086 8.14054C4.10987 8.04854 4.08783 7.94923 4.08605 7.84852C4.08428 7.74782 4.1028 7.64779 4.14052 7.5544C4.17824 7.46102 4.23439 7.37618 4.30561 7.30496C4.37683 7.23374 4.46166 7.1776 4.55505 7.13988C4.64844 7.10216 4.74847 7.08363 4.84917 7.08541C4.94987 7.08719 5.04918 7.10923 5.14118 7.15022C5.23318 7.19121 5.31598 7.25031 5.38465 7.324L7.47865 9.417L10.9516 4.992L10.9706 4.97Z' fill='%23D9D9D9'/%3E%3C/svg%3E"); --cb-check-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M10.9706 4.97C11.1115 4.83589 11.299 4.76175 11.4935 4.76322C11.688 4.76469 11.8743 4.84166 12.0131 4.97789C12.1519 5.11412 12.2324 5.29895 12.2375 5.49338C12.2427 5.68781 12.1721 5.87663 12.0406 6.02L8.05065 11.01C7.98204 11.0839 7.89923 11.1432 7.80718 11.1844C7.71513 11.2255 7.61572 11.2477 7.5149 11.2496C7.41408 11.2514 7.31392 11.233 7.2204 11.1952C7.12689 11.1575 7.04194 11.1013 6.97065 11.03L4.32465 8.384C4.25096 8.31534 4.19186 8.23254 4.15086 8.14054C4.10987 8.04854 4.08783 7.94923 4.08605 7.84852C4.08428 7.74782 4.1028 7.64779 4.14052 7.5544C4.17824 7.46102 4.23439 7.37618 4.30561 7.30496C4.37683 7.23374 4.46166 7.1776 4.55505 7.13988C4.64844 7.10216 4.74847 7.08363 4.84917 7.08541C4.94987 7.08719 5.04918 7.10923 5.14118 7.15022C5.23318 7.19121 5.31598 7.25031 5.38465 7.324L7.47865 9.417L10.9516 4.992L10.9706 4.97Z' fill='%23fff'/%3E%3C/svg%3E"); } /* --- 기본(미선택) --- */ input[type="checkbox"], .select-toggle__box, .filter-item::before, .fsheet__item::before { width: 18px; height: 18px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface) var(--cb-check-off) center / 12px no-repeat; transition: background-color .15s, border-color .15s; } /* --- 선택 --- 여기서도 background 단축 속성을 씁니다. 전달본의 선택 규칙들이 단축 속성 (예: .select-toggle[aria-pressed="true"] .select-toggle__box{ background:… }) 이라 size·position 을 초기값으로 되돌립니다. 색과 이미지만 덮으면 그 초기값이 남아 체크가 좌상단(0% 0%)에 원본 크기로 찍힙니다. */ input[type="checkbox"]:checked, .select-toggle[aria-pressed="true"] .select-toggle__box, .filter-item[aria-pressed="true"]::before, .fsheet__item[aria-pressed="true"]::before { border-color: var(--line); background: var(--blue) var(--cb-check-on) center / 12px no-repeat; } /* 전달본이 ::after 로 찍던 ✓ 는 이제 배경 아이콘이 대신합니다 */ .select-toggle[aria-pressed="true"] .select-toggle__box::after { content: none } /* 호버해도 체크박스는 그대로 (2026-08-07, 디자인 요청) 전달본은 수강신청 사이드바 필터에서만 마우스를 올리면 테두리가 진해집니다 (.filter-item:hover::before{ border-color:var(--faint) }). 체크박스는 어디서나 같아 보이도록 기본 테두리색을 유지합니다. 행 배경이 밝아지는 것(.filter-item:hover)은 목록 항목의 신호라 남겨둡니다. */ .filter-item:hover::before { border-color: var(--line) } /* 로그인 '아이디 저장' 줄 (2026-08-07, 디자인 요청) 전달본 .agree 는 회색 박스(--surface-sunken)에 여러 줄 약관을 담는 자리라 align-items:flex-start + input margin-top:3px 로 되어 있습니다. 한 줄짜리 '아이디 저장'에는 박스가 과하고, 그 두 값 때문에 체크박스가 글자보다 1px 내려가 보입니다. 이 줄에만 붙는 agree--plain 으로 떼어냅니다. (회원가입 전체동의·고객센터 개인정보 동의는 회색 박스를 그대로 씁니다) */ .agree--plain { background: none; padding: 0; align-items: center; } .agree--plain input { margin-top: 0 } /* 수강신청 목록 — 강의 정보표를 아래·왼쪽으로 2px 들입니다 (2026-08-10, 디자인 요청) 전달본은 이 표가 위 제목 블록과 왼쪽 선이 정확히 같고(실측 592.5px 동일), 마지막 줄 '주무부처'의 아랫선도 왼쪽 썸네일 아랫선과 정확히 같습니다(실측 0px). 양쪽 다 딱 맞으면 표가 사진·제목보다 조금 흘러 보여, 살짝 안쪽으로 들여 균형을 맞춥니다. 박스는 grid-area 와 height:100% 로 자리가 고정돼 있어 글자 줄만 움직이고 표 자체의 정렬은 그대로입니다. */ .course-row .spec-table { padding-bottom: 2px; padding-left: 2px } /* 본문이 짧아도 푸터가 화면에 보이지 않게 (2026-08-11, 디자인 요청) 전달본은 body{min-height:100vh} + main{flex:1 0 auto} 로 스티키 푸터를 만듭니다. 그래서 본문이 짧으면 푸터가 화면 **바닥에 붙어** 보입니다(= 화면 안에 들어옵니다). 내용이 몇 줄뿐인 화면에서는 푸터가 본문처럼 커 보여, 아예 한 화면 아래로 내리기로 했습니다. 본문 최소 높이를 '화면 높이 - 헤더' 로 두면 본문 끝이 정확히 화면 끝에 떨어지고 푸터는 그 아래에서 시작합니다 — 스크롤해야 보입니다. --header-h 는 전달본이 폭에 따라 64/56px 로 바꿔 주므로 그대로 씁니다. 내용이 이미 긴 화면에는 아무 영향이 없습니다. */ main { min-height: calc(100vh - var(--header-h)) } /* 기출문제 풀이 — 정보 칸을 항목 수에 맞춥니다 (2026-08-10, 디자인 요청) 전달본 .exam-info 는 4칸 고정(repeat(4,1fr))입니다. 수료시험은 시험명·응시기간· 문항수·시험시간 넷이라 딱 맞는데, 기출문제 풀이는 과정·문항수·유형 셋이라 네 번째 칸이 빈 채로 남아 오른쪽이 휑했습니다. 세 번째 칸이 마지막이면 3칸으로 나눠 양옆을 맞춥니다. 좁은 화면(≤980px)의 2칸 규칙은 전달본 것을 그대로 둡니다. */ @media (min-width: 981px) { .exam-info:has(> div:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr) } } /* 시험성적 — 미응시는 회색 (2026-08-10, 디자인 요청) 전달본은 합격(초록)·불합격(.is-fail 빨강) 둘로만 나눕니다. 미응시는 나쁜 결과가 아니라 아직 아무것도 하지 않은 상태라 빨강으로 겁줄 이유가 없습니다. 합격/불합격과 같은 짜임(연한 배경 + 진한 글자)으로 무채색 한 쌍을 씁니다. */ .result-summary__badge.is-none { background: var(--surface-alt); color: var(--muted) } .result-msg.is-none { background: var(--surface-alt) } .result-msg.is-none p { color: var(--muted) } /* 본문과 푸터 사이 여백이 사라진 것 (2026-08-10) 전달본 base.css 는 `main > .container:last-child{ padding-bottom:var(--s-10) }` 로 본문 끝과 푸터 사이에 48px 을 둡니다. 수강신청은 React 로 옮기며 컨테이너 뒤에 필터 시트·장바구니 바·플로팅 버튼이 같은 main 안으로 들어가면서 :last-child 가 깨져 간격이 0 이 됐습니다(원본 실측 48px → LMS 0px). 그 뒤 요소들은 sticky·fixed 라 흐름에서 자리를 차지하지 않아 화면상으로는 여전히 컨테이너가 마지막입니다. 전달본과 같은 값을 그대로 줍니다. (공지·합격후기·나의 강의실처럼 컨테이너로 끝나는 화면은 원래대로 걸립니다. 취득 절차·고객센터처럼 풀블리드 띠로 끝나는 화면은 전달본이 일부러 제외한 것이라 그대로 둡니다.) */ main > .container:has(~ .cart-bar) { padding-bottom: var(--s-10) } /* 수강신청 사이드바 — 조건 묶음 접기 + 스크롤 고정 (2026-08-10, 디자인 요청) 접기: 제목(.filter-group__title)을 버튼으로 바꿔 눌러 여닫습니다. 화살표는 전달본 공통 셰브론(.panel-toggle .chev)을 그대로 써서 FAQ·푸터와 같은 모양·회전을 씁니다. 제목의 글꼴·색은 전달본 값을 그대로 두고 배치만 폅니다. 고정: 사이드바가 본문보다 짧아도 목록이 길어 한참 스크롤해야 했습니다. 조건이 다 펼쳐지면 사이드바가 화면보다 길어지므로(실측 1027px > 900px) max-height 로 묶고 안쪽에서 스크롤되게 합니다. 그러지 않으면 아랫부분을 영영 볼 수 없습니다. 980px 이하에서는 전달본이 사이드바를 감추고 바텀시트를 쓰므로 이 규칙은 그때 의미가 없습니다. */ #course-filters { position: sticky; top: calc(var(--header-h) + var(--s-4)); /* 높이 기준 (2026-08-11 수정) 헤더에 붙었을 때(top 74px)를 기준으로 잡았더니, 페이지 맨 위에서는 사이드바가 아직 제자리(208px)에 있어 아래가 화면 밖으로 124px 나갔습니다. 그 상태로 안쪽을 스크롤하면 마지막 '연령'이 화면 밖에서 잘려 보였습니다. 그래서 붙기 전 자리를 기준으로 잡습니다 — 208px 은 헤더(64) + 경로(47) + 제목 블록(97) 로, 화면 높이가 달라져도 그대로인 값입니다(실측). 붙었을 때는 아래에 여유가 조금 남지만, 어느 위치에서도 잘리지 않습니다. */ --filters-offset: 208px; max-height: calc(100vh - var(--filters-offset) - var(--s-7)); overflow-y: auto; overscroll-behavior: contain; /* 스크롤바를 감춥니다 — 조건을 접고 펴면 스크롤바가 생겼다 사라지며 사이드바 가로폭이 그때마다 달라졌습니다. 전달본도 같은 방식을 씁니다(.dtabs__in · .dwho — appendix.css) */ scrollbar-width: none; /* 아래가 뚝 잘려 보이던 것 (2026-08-11, 디자인 요청) 스크롤바를 감춰 둬서 더 있다는 표시가 없는데 카드가 컨테이너 끝에서 그대로 잘렸습니다. 아래쪽을 흐리게 해 "더 있다"를 알립니다. 흐려지는 24px 만큼 아래 여백을 함께 둡니다 — 끝까지 내리면 그 자리에 빈 여백만 남아 마지막 항목이 흐려지지 않습니다. 스크롤이 없을 때도 그 자리는 빈 여백이라 티가 나지 않습니다. */ padding-bottom: 24px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); } #course-filters::-webkit-scrollbar { display: none } .filter-group__title { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; text-align: left; /* 아래 항목과 좌우를 맞춥니다 — .filter-item 이 좌우 10px 을 갖고 있어 제목만 그만큼 밖으로 나가 있었습니다(글자 시작 64.5 vs 체크박스 74.5, 화살표 끝 250.5 vs 개수 끝 240.5). 같은 값을 줘서 선을 맞춥니다. */ padding: 0 10px; /* 글자도 주변과 맞춥니다 (2026-08-11, 디자인 요청) 전달본은 12px(--fs-xs)인데 바로 아래 항목(.filter-item)·정렬 버튼 (.sort-group button)·결과 문구(.toolbar__result)·마이페이지 사이드 메뉴 (.side-nav__item)가 모두 14px(--fs-sm) 입니다. 제목만 작아 겉돌았습니다. */ font-size: var(--fs-sm); } /* 화살표 — 전달본 공통 셰브론(.faq__q .arrow · .filter-toggle .chev · .footer__box .chev) 과 **같은 값**을 씁니다. 그 규칙에 선택자를 얹을 수 없어 값을 옮겨 적었습니다. (.panel-toggle 을 붙이면 classroom.css 가 16px 글자 + 16/18px 패딩까지 끌고 와 제목이 66px 이 됩니다. 그래서 클래스를 쓰지 않고 여기서 화살표만 그립니다) */ .filter-group__title .chev { flex-shrink: 0; width: 22px; height: 22px; font-size: 0; background-color: var(--faint); -webkit-mask: var(--chev) center / 18px no-repeat; mask: var(--chev) center / 18px no-repeat; transition: transform .18s; } .filter-group__title[aria-expanded="true"] .chev { transform: rotate(180deg) } /* 부드럽게 여닫기 — FAQ 와 같은 grid 0fr↔1fr 모프입니다(review.css .faq__a). 바깥이 높이를 애니메이션하고 안쪽이 잘라냅니다. 안쪽에 패딩을 주면 0fr 에서 그 높이만큼 남아 완전히 닫히지 않으므로 여백은 항목이 각자 갖습니다. */ .filter-group__panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .32s cubic-bezier(.4, 0, .2, 1), opacity .24s ease; } .filter-group__title[aria-expanded="true"] + .filter-group__panel { grid-template-rows: 1fr; opacity: 1; } .filter-group__panel-inner { overflow: hidden; min-height: 0 } /* 접힌 묶음은 제목만 남깁니다 — 펼쳤을 때의 아래 여백(8px)이 남지 않게 */ .filter-group.is-folded .filter-group__title { margin-bottom: 0 } @media (prefers-reduced-motion: reduce) { .filter-group__panel { transition: none } } /* 고른 개수 — 접어 두면 몇 개 골랐는지 알 수 없어 제목 옆에 붙입니다. 선택 상태를 나타내는 색이라 .filter-item[aria-pressed] 와 같은 짝을 씁니다. */ .filter-group__count { margin-right: auto; /* 화살표는 오른쪽 끝에 그대로 둡니다 */ /* 숫자를 원 한가운데 놓습니다. line-height 로 맞추면 글자 상자가 위아래로 1px·2px 로 어긋납니다 (숫자는 아랫줄기가 없어 상자 안에서 위로 붙습니다). flex 로 상자째 가운데 정렬하고 line-height 는 1 로 둬서 글꼴에 상관없이 가운데로 떨어지게 합니다. */ display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 5px; /* 두 자리 수는 옆으로 늘어납니다 */ border-radius: var(--r-full); background: var(--blue-soft); color: var(--blue); font-size: var(--fs-2xs); font-weight: 700; line-height: 1; } /* 초기화 — 이제 목록 아래에 놓입니다. 전달본은 오른쪽 위 절대배치였는데 접기 화살표를 가려 아코디언으로 보이지 않았습니다(2026-08-10, 디자인 요청). */ .filter-group__reset { position: static; margin-top: 6px; width: 100%; justify-content: center; padding: 6px 7px; } /* 높이 줄이기 — 조건이 20개라 전달본 값(항목 40px)이면 사이드바가 화면을 넘칩니다. 글자 크기는 그대로 두고 위아래 여백만 좁힙니다. */ .filter-group { padding: 12px } /* 안쪽 여백 — 위아래 8px · 좌우 10px (2026-08-11, 디자인 요청) */ .filter-item { padding: 8px 10px } /* FAQ 아이템 테두리 (2026-08-10, 디자인 요청) 과정 상세(page--flat)에서는 .faq__item 에 border 가 걸리지만, 취득절차·강의실 같은 일반 페이지에서는 page--flat 이 없어 테두리가 빠집니다. 모든 FAQ 에 일관되게 테두리를 줍니다. */ .faq__item { border: 1px solid var(--line) } /* 강의실 자주 묻는 질문 — 이전/다음 강의 버튼과 간격 (2026-08-10, 디자인 요청) */ .lec-qna { margin-top: 20px } /* 로그인 상태에서 상단 메뉴가 두 줄로 깨지는 것 (2026-08-10) 전달본 responsive.css 는 "이 폭부터 상단 메뉴가 두 줄로 깨지므로" 1100px 에서 햄버거로 바꿉니다. 그 기준은 **비로그인 헤더**(회원가입 | 로그인) 기준입니다. 로그인하면 그 자리에 이름이 들어가 더 일찍 깨집니다 — 실제로 이름이 7자인 계정에서 1101~1145px 구간이 두 줄이었습니다(항목 높이 38px → 61px). 이름이 길수록 이 구간은 더 넓어집니다. 기준(1100px)은 전달본 값이라 건드리지 않고, 원인 두 가지만 막습니다. 1) 메뉴 이름은 한 줄짜리 라벨입니다 — 중간에서 접히지 않게 합니다. 2) 이름은 길이를 알 수 없으므로 폭을 묶고 넘치면 말줄임합니다. (전체 이름은 마이페이지 회원정보에서 확인됩니다) 1)만 하면 접히는 대신 가로로 넘칩니다 — 2)가 반드시 함께 있어야 합니다. 8em 은 기준폭 1101px 에서 넘치지 않는 최대값으로 재서 정했습니다 (9em 부터 1112px 로 넘침). 흔한 이름은 그대로 다 나오고, 아주 긴 이름만 말줄임됩니다. */ .gnb a { white-space: nowrap } .header__auth .util-link--strong { max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 게시글 하단 버튼 줄 — 목록으로·수정하기가 간격 없이 붙어 보였습니다 (2026-08-11). 다른 페이지의 버튼 줄(.result-cta, classroom.css)과 같은 구조로 맞춥니다. */ .article__actions { display: flex; justify-content: center; gap: var(--s-4); flex-wrap: wrap; } /* 게시글 본문 아래 구분선 — appendix.css 정리 과정에서 빠진 것을 복구 (2026-08-11) */ .article__body { border-bottom: 1px solid var(--line); } /* 게시글 본문 최소 높이 (2026-08-11, 디자인 요청) 후기가 두세 줄이면 본문 칸이 145px 밖에 안 돼서, 제목 블록(205px)보다도 작은 띠처럼 보이고 아래가 휑했습니다. 글이 짧아도 본문이 한 덩어리로 읽히도록 최소 높이를 둡니다. 값은 '몇 줄이 들어가는 칸인가' 로 잡았습니다 — 본문 한 줄이 26.6px (14px * 1.9), 위아래 여백이 32px 씩입니다. box-sizing 이 border-box 라 아래 값에는 그 64px 이 포함돼 있습니다. 모바일 220px → 약 6줄 (좁아서 같은 글도 여러 줄로 감깁니다) 태블릿 260px → 약 7.5줄 데스크탑 280px → 약 8줄 (본문 폭 840px 이라 한 줄에 많이 들어갑니다) 폭이 넓을수록 같은 글이 적은 줄로 접혀 칸이 더 납작해지므로, 넓은 화면일수록 값을 키웁니다. 끊는 지점은 전달본이 쓰는 560 / 980 그대로입니다. 데스크탑이 300px 이 아니라 280px 인 이유: 1280x800 노트북에서 300px 이면 '목록으로' 버튼이 화면 밖으로 16px 밀려납니다. 280px 이면 아슬아슬하게 화면 안에 남습니다(제목이 두 줄이면 어차피 밀립니다). 글이 이미 긴 글에는 아무 영향이 없습니다. (합격후기·공지 상세가 같은 마크업이라 두 곳에 함께 걸립니다) */ .article__body { min-height: 220px } @media (min-width: 561px) { .article__body { min-height: 260px } } @media (min-width: 981px) { .article__body { min-height: 280px } } /* ========================================================================== 강의실 — 좁은 화면 순서·접힘 (2026-08-11, 디자인 요청) 전달본 classroom.css 는 980px 아래에서 `.lec-side{ order:-1 }` 로 오른쪽 묶음(학습자료 + 강의목차)을 통째로 영상 **위**에 올립니다. 그래서 강의실에 들어오면 20강짜리 목차부터 보이고 영상은 한참 내려야 나왔습니다. 바꾼 순서: 영상 → 현재 강의 → 진도율 → 이전/다음 강의 → 목차 → 학습자료 → FAQ ========================================================================== */ @media (max-width: 980px) { /* 왼쪽 칸(영상~FAQ)과 오른쪽 묶음은 각각 한 덩어리라, 사이에 목차만 끼워 넣을 수 없습니다. 왼쪽 칸의 상자를 없애 그 안의 것들이 바깥 그리드의 칸이 되게 하면(display:contents) 하나씩 순서를 줄 수 있습니다. 오른쪽