/* quote_v2.css — 주문 페이지 설정 구역 새 UI (시험용) 라이브 css/quote.css 는 건드리지 않는다. 이 파일은 quote/instantq.php (라이브) 와 quote/instantq_test.php 에서만 불린다. 모든 규칙을 .quote-v2 아래로 가둬 다른 페이지로 새지 않게 한다. 짜임 (단일 열) 01 Binding and units <- .qv2-label 제목 줄 Size Unit (o) inch ... <- .qv2-body 설정 ------------------------------ <- 구역 구분선 02 Size and binding edge Size [ ... ] .qv2-group 설정 구역 하나 .qv2-label 제목 줄 (번호 + 제목) .qv2-body 설정 칸 .qv2-row 설정 칸 안의 한 줄. 줄이름 | 조작부 .qv2-field 조작부 2열(제목 왼쪽)로도 해 봤는데 어울리지 않아 접었다. 되살리지 말 것. 색 구분선은 연한 한 색. 색은 지금 손대고 있는 구역 한 곳에만 쓴다. */ /* ───────── 시험 페이지 표시 ───────── */ .qv2-testbar { margin: 0 0 18px; padding: 10px 16px; border: 1px dashed #b4532a; border-radius: 6px; background: #fdf1e8; color: #8a3b18; font-size: 13px; font-weight: 700; letter-spacing: .01em; } /* ───────── 설정 구역 ───────── */ .quote-v2 .qv2-group { padding: 26px 0 30px 15px; border-top: 1px solid var(--quote-line); border-left: 3px solid transparent; transition: border-left-color .15s ease, background-color .15s ease; } .quote-v2 .qv2-group:first-child { border-top: 0; padding-top: 4px; } /* 지금 손대고 있는 구역 한 곳에만 색을 쓴다. 구역마다 다른 색을 주면 색이 여섯 개가 되는데 그 색들이 아무것도 알려주지 않아 소음이 된다. */ .quote-v2 .qv2-group.is-active { border-left-color: var(--quote-accent); background-color: rgba(255, 253, 248, .72); } /* ───────── 제목 줄 ───────── */ .quote-v2 .qv2-label { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; } .quote-v2 .qv2-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 26px; border-radius: 999px; background: #f6efe4; color: var(--quote-accent-dark); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .02em; } /* 카드 안에 있던 Portfolio / Paper Image / + Subscription Card 를 제목 줄 오른쪽으로 옮겨 붙였다. */ .quote-v2 .qv2-label .quote-inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; } .quote-v2 .qv2-label strong { color: var(--quote-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 18px; font-weight: 750; line-height: 1.3; letter-spacing: 0; } .quote-v2 .qv2-group.is-active .qv2-label strong { color: var(--quote-accent-dark); } /* ───────── 설정 칸 ───────── */ /* 번호 동그라미(34) + 간격(12) 만큼 들여써서 제목 글자 아래로 줄을 세운다. */ .quote-v2 .qv2-body { display: flex; flex-direction: column; gap: 10px; padding-left: 46px; } /* 구역 안의 카드를 걷어낸다. quote.css 의 카드 규칙들은 선택자가 무겁다. .quote-renewal-form .instantq1-wrap-in .instantq1-input1 클래스 3 .quote-renewal-form .instantq1-wrap-in .instantq1-input1.quote-section-body 클래스 4 + !important .quote-renewal-form ... .input1-bot .input1-botleft 클래스 5 + !important 가벼운 규칙으로는 안 덮인다. 그래서 같은 사슬에 .quote-v2 를 앞에 붙여 한 단계씩 무겁게 쓴다. 다른 페이지에는 .quote-v2 가 없어 새지 않는다. 여백까지 걷어내는 이유는 왼쪽 선을 맞추기 위해서다. 카드의 24px 여백이 남아 있으면 설정이 구역 제목 글자보다 24px 더 들어가 보인다. */ .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1, .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1.quote-section-body, .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input2 .input2-right { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } /* 03 Cover / 04 Inside page 의 안쪽 칸. 테두리·28px 여백에 더해 왼쪽 93px 여백과 가운데 세로선이 있는데, 두 칸을 나란히 쓰던 시절의 것이라 단일 열에서는 내용을 밀어내기만 한다. 04 의 .input1-botright 에 붙은 mt45 pl67 도 같은 이유로 지운다. */ .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-bot .input1-botleft, .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-bot .input1-botright { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } .quote-v2 .qv2-body > .instantq1-radio, .quote-v2 .qv2-body > .quote-option-card { margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } /* ───────── 줄 박자를 하나로 ───────── 간격만 맞춰서는 안 맞았다. 줄 내용의 높이가 구역마다 다르기 때문이다. 01 라디오 약 24px 02·03 드롭다운 약 46px 같은 간격을 줘도 줄 높이가 다르면 눈에는 다른 박자로 읽힌다. 그래서 줄 높이까지 묶는다. 기준은 Cover 의 박자 — 줄 46px, 간격 10px. 어느 구역이든 한 줄은 46px, 줄 사이는 10px, 따라서 56px 박자로 선다. */ .quote-v2 .qv2-row, .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-div1 .input1-div1-size, .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-div1 .input1-div1-edge, .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-bot .botleft-div1, .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-bot .botright-div1 { min-height: 46px !important; align-items: center !important; } /* 02 Size 줄만 46 이 아니라 56 이었다. min-height 는 최솟값이라 내용이 더 크면 그대로 늘어난다. 안을 들여다보니 크기 선택 드롭다운에 mb10 이 붙어 있다.
46 + 10 = 56. 두 칸 나란히 쓰던 시절 아래 줄과 띄우려고 넣은 여백인데, 지금은 줄 간격을 격자가 맡으므로 필요 없다. 같은 꼴이 더 있는지 01~04 구역의 여백 도우미 클래스를 전수로 세어 봤다. mb10 2 · mt10 4 · mt142 3 · mt30 3 · mt45 1 · mt50 1 하나씩 쫓지 않고, 줄 안에 들어가는 것들의 세로 margin 을 통째로 지운다. 줄 높이는 조작부 높이가 정하고 줄 사이는 격자가 정한다는 규칙을 세우는 것이다. 가로 margin(mr5 · pl67 등)은 줄 안 배치에 쓰이므로 건드리지 않는다. */ .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-div1 .input1-div1-size > *, .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-div1 .input1-div1-edge > *, .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-bot .botleft-div1 > *, .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-bot .botright-div1 > *, .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-div1-size :is(.selection, input, p, button), .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-div1-edge :is(.selection, input, p, button), .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .botleft-div1 :is(.selection, input, p, button), .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .botright-div1 :is(.selection, input, p, button) { margin-top: 0 !important; margin-bottom: 0 !important; } .quote-v2 .qv2-row { display: grid; grid-template-columns: 126px minmax(0, 1fr); gap: 0 18px; align-items: center; } /* ───────── 줄 사이 간격을 하나로 ───────── 구역마다 따로 놀았다. 01 .qv2-body gap 16px 02 .input1-div1 윗여백 42px + gap 18px <- 제목에서 첫 줄까지 104px 03·04 .botleft-div1:nth-child(n+2) margin-top 10px 전부 12px 로 맞춘다. 조작부 높이는 구역마다 다르므로 줄 높이까지 같아지지는 않지만, 사이 간격이 같으면 눈에는 같은 박자로 읽힌다. 02 의 윗여백 42px 은 카드 안에 있을 때 쓰던 것이라 그대로 지운다. 원래 규칙에 !important 가 없어 이쪽은 가볍게 써도 이긴다. */ .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-div1 { gap: 10px !important; padding-top: 0 !important; } .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-bot .botleft-div1:nth-child(n+2), .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-bot .botright-div1:nth-child(n+2) { margin-top: 10px !important; } /* 02 의 줄들은 부모 격자의 gap 12px 위에 자기 margin 을 또 얹는다. mt10 / mt142 같은 옛 간격 도우미가 붙어 있어 줄마다 10px 씩 더 벌어진다. 격자 gap 하나로만 간격이 정해지도록 margin 을 지운다. */ .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-div1 .input1-div1-size, .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-div1 .input1-div1-edge { margin: 0 !important; padding-right: 0 !important; } /* .input1-div1-left / -right 는 두 칸을 나란히 두던 시절의 껍데기다. 단일 열에서는 그 안의 줄들이 바로 격자에 서야 간격이 하나로 맞는다. */ .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-div1 > .input1-div1-left, .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-div1 > .input1-div1-right { display: grid !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; } /* ───────── 설정 줄이름을 한 가지로 ───────── 구역마다 글자가 따로 놀고 있었다. 01 .qv2-rowlabel 14px / 600 / 본문색 02 .font-p1 18px / 700 / 본문색 (Size, Binding Edge, Wire Color) 03·04 .font-p2 15px / 500 / 흐린색 (Paper, Print Color, Cover Finish) 구역 제목이 18px/750 이므로 줄이름은 그보다 한 단 낮은 15px 으로 맞춘다. 굵게 쓰지 않는다. 제목과 줄이름이 둘 다 굵으면 어느 쪽이 위인지 안 보인다. 굵기는 제목에만 두고, 줄이름은 보통 굵기로 둔다. quote.css 쪽이 .quote-renewal-form 사슬에 !important 를 달고 있어 가벼운 선택자로는 안 덮인다. 같은 사슬 앞에 .quote-v2 를 붙여 한 단계 무겁게 쓴다. .font-p1 중에서도 'Dust Cover Setting' 같은 소제목은 성격이 달라 건드리지 않고, 줄이름이 서는 자리(.input1-div1-size / .input1-div1-edge / .botleft-div1 / .botright-div1) 안의 것만 집는다. */ .quote-v2 .qv2-rowlabel, .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-div1 .input1-div1-size > .font-p1, .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-div1 .input1-div1-edge > .font-p1, .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-bot .botleft-div1 > .font-p2, .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-bot .botright-div1 > .font-p2 { margin: 0 !important; color: var(--quote-text) !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.4 !important; } /* 줄이름 칸 너비도 126 / 110 / 128 로 제각각이었다. 126 으로 맞춘다. */ .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-bot .botleft-div1, .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-bot .botright-div1 { grid-template-columns: 126px minmax(0, 1fr) !important; gap: 18px !important; } /* 첫 줄만 '제목 + 버튼' 꼴로 쓰이던 예외. 카드 제목을 걷어냈으므로 되돌린다. */ .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-bot .botright-div1:first-child { grid-template-columns: 126px minmax(0, 1fr) !important; } .quote-v2 .qv2-field { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; } /* 라디오. quote.css 가 .quote-renewal-form 안에서 이미 inline-flex + 네이티브 input(accent-color) + padding-left:0 으로 그려 둔다. .checkmark 는 거기서 display:none 이라 새 마크업에서는 아예 넣지 않는다. JS 가 참조하지 않는 위젯이라 안전하다. 여기서는 줄 간격만 잡는다. */ .quote-v2 .qv2-field .styleradiobox { margin: 0 !important; font-size: 14px; white-space: nowrap; } /* ───────── End Paper 줄의 ? 가 다음 줄로 내려가던 것 ───────── 처음엔 auto-fit 격자 탓인 줄 알고 flex 로 돌렸는데 더 나빠졌다. 셀렉트들이 폭 100% 를 먹어 세로로 쌓였다. 진짜 원인은 따로 있었다. quote.css 가 _gsm 셀렉트를 가진 줄을 두 칸으로 못 박아 둔다. .botleft-div1:has(.selection[id*="_gsm"]) .botleft-div2 grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) 종이 이름은 길고 평량은 짧으니 이름 쪽을 넓게 주려는 규칙이다. 면지 줄에는 거기에 ? 가 하나 더 붙어 세 번째 항목이 되는데 칸이 둘뿐이라 다음 줄로 내려갔다. 그 줄에만 ? 자리를 한 칸 더 연다. 칸 비율은 그대로 두고 30px 만 더한다. 다른 ? (Cover Fold / Dust Cover / Subscription Card)는 .selection 안에 들어가 있어 이 문제가 없다. */ .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-bot .botleft-div2:has(> [tooltip-part="END_PAPER"]), .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-bot .botright-div2:has(> [tooltip-part="END_PAPER"]) { display: grid !important; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) 30px !important; gap: 10px !important; align-items: center !important; } /* 이 줄에는 종이 종류에 따라 JS 가 열어 주는 셀렉트가 둘 더 숨어 있다 (hdend_subname / hdend_color). 그게 열리면 항목이 넷이 되는데, ? 가 마크업상 맨 뒤라 그대로 두면 둘째 줄 끝에 떨어진다. order 로 못 박아 어느 경우든 맨 뒤에 서게 한다. */ .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .input1-bot [tooltip-part="END_PAPER"] { order: 9; } /* ───────── 안내 한 줄 ───────── quote.css 의 .quote-inline-note 는 빨간색이다. 더스트커버 사이즈가 범위를 벗어났을 때처럼 '잘못됐다' 를 알리는 자리에 쓰던 것이다. 표지 후처리 안내는 잘못됐다는 뜻이 아니라 '평량을 먼저 고르면 열린다' 는 길잡이라, 같은 빨강을 쓰면 오해를 준다. 그렇다고 본문 흐린색을 쓰니 눈에 안 띄었다. 구역 번호에 쓰는 짙은 주황으로 간다. 오류가 아니라는 건 전하면서 눈에는 들어온다. */ .quote-v2 .quote-renewal-form .quote-inline-note.quote-note-muted { color: var(--quote-accent-dark); font-weight: 600; } /* ───────── 빈 필수 항목 표시 ───────── 버튼을 눌렀을 때 빈 칸으로 포커스는 가는데 아무 말이 없어, 왜 안 넘어가는지 모르는 경우가 있다. 표시가 약한 것이 큰 이유다. 지금 .errbox_input 은 테두리 '색' 만 바꾼다. common.css:238 border-color: #ce2f26 !important (1px) quote.css:2148 같은 값으로 복구 그런데 리뉴얼 폼은 평소에도 테두리가 주황 계열이라, 빨강 1px 로는 차이가 거의 안 보인다. 두께·바탕·둘레 띠를 함께 줘서 확실히 드러낸다. quote.css 쪽이 클래스 5개 + !important 라 그보다 무겁게 쓴다. */ .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 input.errbox_input, .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 input.form-control.errbox_input, .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input1 .selection > .value.errbox_input, .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input2 input.errbox_input, .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input2 input.form-control.errbox_input, .quote-v2 .quote-renewal-form .instantq1-wrap-in .instantq1-input2 .selection > .value.errbox_input { border: 2px solid #ce2f26 !important; background-color: #fdecea !important; box-shadow: 0 0 0 3px rgba(206, 47, 38, .18) !important; } /* ───────── 빈 필수 항목 공통 안내 ───────── 스티키 요약의 버튼 바로 위에 띄운다. 누르는 자리에서 바로 보여야 한다. 비어 있을 때는 자리를 차지하지 않는다. */ .quote-v2 .quote-floating-summary .quote-floating-alert { margin: 0 0 12px; padding: 10px 13px; border: 1px solid #ce2f26; border-radius: 7px; background: #fdecea; color: #a3251e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.45; } .quote-v2 .quote-floating-summary .quote-floating-alert:empty { display: none; } /* ───────── 좁은 화면 ───────── */ @media (max-width: 900px) { .quote-v2 .qv2-body { padding-left: 0; } } @media (max-width: 640px) { .quote-v2 .qv2-row { grid-template-columns: minmax(0, 1fr); gap: 6px; min-height: 0; } }