/* css/reach-real.css — 11-10 '플랫폼 뒤에 숨은 곳'(#global) 창 세 장을 도식(동심원 · 떠 있는 작은 카드 · 플랫폼 타일)에서 진짜 화면으로. ① 요청서 = 문서 보기 창(언어 탭 · 종이 한 장) ② 호스팅·도메인 = 사건 기록 창(왼쪽 요청 경로 여섯 · 오른쪽 조회 줄·보낼 곳·기록) ③ 플랫폼 창구 = 창구 목록 창(찾기 · 줄 목록) 마크업 = design-1110/home/gen-reach-real.py · 화면 부품은 css/say-real.css 의 .rl-*(em 단위 · 카드 폭 기준 @container)를 같이 씀. 움직임은 js/am-reach.js 그대로(탭 2.6초 · 경로 5초 · 줄 강조 8초) — 그래서 옛 이름(.rch-ring · .rch-chip · .rch-sc · .rch-orbit · .rch-tile)을 유지하고 모양만 여기서 덮음. 옛 규칙(css/am-reach.css · identity-sections.css)을 이기려고 전부 '#global .rch-real' 로 시작. 전부 가상 예시(.example · 203.0.113.x = 문서용 주소대 · 로고 0). */ #global .rch-win.rch-real { container-type: size; } #global .rch-win.rch-real::before { display: none; } #global .rch-real .rl-win { left: 5%; right: 5%; top: clamp(30px, 8%, 44px); bottom: -3%; } #global .rch-real .rch-ex { flex: none; height: 1.75em; padding: 0 .7em; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor; font-size: .82em; font-weight: 500; line-height: 1; } @media (max-width: 1180px) { #global .rch-win.rch-real { height: clamp(340px, 46vw, 400px); } } @media (max-width: 767px) { #global .rch-win.rch-real { height: 360px; } #global .rch-c2 .rch-win.rch-real { height: 420px; } #global .rch-real .rl-win { left: 12px; right: 12px; top: 34px; bottom: -10px; } } /* ── ① 요청서: 문서 보기 창 ── */ #global .rch-real .rch-docv { background: #e9e7df; padding: 0 1.1em; } #global .rch-real .rch-doc { position: relative; left: auto; top: auto; width: auto; height: auto; min-height: 100%; max-width: 40em; margin: 1.1em auto 0; padding: 1.2em 1.4em 2em; border-radius: .5em .5em 0 0; background: #fff; color: #1d2125; box-shadow: 0 0 0 1px #dcdad2, 0 1.2em 2.4em -1.2em rgb(16 27 27 / .35); } #global .rch-real .rch-doc-h { display: flex; align-items: center; gap: .6em; margin: 0; color: #3d444b; font-size: .95em; font-weight: 600; white-space: nowrap; } #global .rch-real .rch-doc-h .rch-ex { color: #5b626a; } #global .rch-real .rch-dot { flex: none; width: .55em; height: .55em; border-radius: 50%; background: #f75b2b; box-shadow: 0 0 0 .22em rgb(247 91 43 / .16); } #global .rch-real .rch-sent { position: static; display: inline-flex; align-items: center; gap: .45em; height: 1.95em; margin: 0 0 0 auto; padding: 0 .8em 0 .55em; border-radius: 999px; background: #101b1b; color: #f3f0e8; font-size: .86em; font-weight: 600; line-height: 1; } #global .rch-real .rch-sent i { position: relative; flex: none; width: 1.05em; height: 1.05em; border-radius: 50%; background: #f75b2b; } #global .rch-real .rch-sent i::before { content: ""; position: absolute; left: 50%; top: 46%; display: block; width: .42em; height: .22em; margin: -.16em 0 0 -.24em; border-left: .13em solid #101b1b; border-bottom: .13em solid #101b1b; transform: rotate(-45deg); } #global .rch-real .rch-tabs { display: flex; gap: .25em; width: max-content; margin: 1.1em 0 0; padding: .22em; border-radius: 999px; background: #eceae3; } #global .rch-real .rch-tabs > span { padding: .42em .9em; border-radius: 999px; color: #5b626a; font-size: .9em; font-weight: 500; line-height: 1; } #global .rch-real .rch-tabs > span.is-on { background: #fff; color: #101b1b; box-shadow: 0 1px 2px rgb(16 27 27 / .14); } #global .rch-real .rch-sheets { position: static; display: grid; height: auto; margin-top: 1.7em; } /* 언어가 바뀔 때 두 장이 겹쳐 보이지 않게: 나가는 장은 바로 꺼지고(.14초) 들어오는 장은 그 뒤에 올라옴 */ #global .rch-real .rch-sheet { position: static; grid-area: 1 / 1; min-width: 0; opacity: 0; transform: translateY(.5em); transition: opacity .14s ease, transform .14s ease; } #global .rch-real .rch-sheet.is-on { opacity: 1; transform: none; transition: opacity .42s ease .16s, transform .5s cubic-bezier(.22, 1, .36, 1) .16s; } #global .rch-real .rch-sheet .t { position: relative; display: inline-block; margin: 0 0 .8em -.3em; padding: .12em .3em; color: #101b1b; font-size: 1.62em; font-weight: 700; line-height: 1.22; letter-spacing: -.02em; outline: 1.5px solid #f75b2b; outline-offset: 0; } #global .rch-real .rch-sheet .t::before { content: attr(data-l); position: absolute; left: -1.5px; bottom: calc(100% + 1.5px); height: 1.6em; padding: 0 .6em; border-radius: .25em .25em 0 0; background: #f75b2b; color: #101b1b; font-size: .5em; font-weight: 700; line-height: 1.6em; letter-spacing: 0; white-space: nowrap; } #global .rch-real .rch-sheet .r { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: .8em; margin: 0; padding: .62em 0; border-top: 1px solid #e6e8eb; color: #1d2125; font-size: 1em; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; } #global .rch-real .rch-sheet .r > span { color: #7a828a; } #global .rch-real .rch-sheet .b { margin: 0; padding: .9em 0 0; border-top: 1px solid #e6e8eb; color: #3d444b; line-height: 1.62; } #global .rch-real .rch-sheet .g { margin: 1.1em 0 0; color: #5b626a; font-size: .95em; } @container (max-width: 400px) { #global .rch-real .rch-docv { padding: 0 .5em; } #global .rch-real .rch-doc { padding: 1.1em 1.1em 2em; } #global .rch-real .rch-sheet .r { grid-template-columns: 4.4em minmax(0, 1fr); gap: .6em; } } @media (prefers-reduced-motion: reduce) { #global .rch-real .rch-sheet, #global .rch-real .rch-sheet.is-on { transition: none; } } /* ── ② 사건 기록 창: 왼쪽 요청 경로 · 오른쪽 그 경로의 기록 ── */ #global .rch-real .rl-dk { background: #0d1616; color: #eef2ee; } #global .rch-real .rl-dk .rl-bar { border-color: #223130; background: #142020; } #global .rch-real .rl-dk .rl-bar > i { background: #34474380; } #global .rch-real .rl-dk .rl-url { background: #0d1616; box-shadow: inset 0 0 0 1px #263735; color: #a5b3ab; } #global .rch-real .rch-md { display: grid; grid-template-columns: 13.6em minmax(0, 1fr); } #global .rch-real .rch-side { min-width: 0; padding: .95em .6em; border-right: 1px solid #1f2d2c; } #global .rch-real .rch-side-h { padding: 0 .7em .6em; color: #7f8e86; font-size: .82em; font-weight: 600; letter-spacing: .02em; } #global .rch-real .rch-ring { position: static; width: auto; height: auto; display: flex; flex-direction: column; gap: .12em; transition: none; } #global .rch-real .rch-chip { position: static; transform: none; } #global .rch-real .rch-chip > b { display: flex; align-items: center; gap: .65em; width: auto; height: auto; transform: none; padding: .62em .7em; border: 0; border-radius: .55em; background: none; box-shadow: none; color: #a5b3ab; font-size: 1em; font-weight: 500; line-height: 1.2; opacity: 1; white-space: nowrap; transition: background-color .3s ease, color .3s ease; } #global .rch-real .rch-chip > b::before { content: ""; flex: none; width: .56em; height: .56em; border-radius: 50%; box-shadow: inset 0 0 0 .1em #5d6f67; transition: background-color .3s ease, box-shadow .3s ease; } #global .rch-real .rch-chip.is-on > b { background: #1a2928; color: #fff; box-shadow: inset 0 0 0 1px #2c3f3c; } #global .rch-real .rch-chip.is-on > b::before { background: #f75b2b; box-shadow: 0 0 0 .24em rgb(247 91 43 / .22); } /* 지금 경로보다 앞선 경로 = 이미 보낸 곳(채운 점) · 줄 끝 상태 낱말: 대기 → 확인 중 → 보냄 */ #global .rch-real .rch-chip:has(~ .rch-chip.is-on) > b::before { background: #cfd8d1; box-shadow: none; } #global .rch-real .rch-chip > b::after { content: "대기"; margin-left: auto; padding-left: .6em; color: #6f8078; font-size: .82em; font-weight: 500; } #global .rch-real .rch-chip.is-on > b::after { content: "확인 중"; color: #ffb69c; } #global .rch-real .rch-chip:has(~ .rch-chip.is-on) > b::after, #global .rch-real .rch-md:has(.rch-sc.is-on.is-done) .rch-chip.is-on > b::after { content: "보냄"; color: #cfd8d1; } #global .rch-real .rch-scs { position: relative; left: auto; top: auto; width: auto; height: auto; min-width: 0; animation: none; } #global .rch-real .rch-sc { position: absolute; inset: 0; left: 0; top: 0; width: auto; padding: 1.05em 1.3em 0; border-radius: 0; background: none; color: #eef2ee; box-shadow: none; opacity: 0; transform: translateY(.5em); transition: opacity .16s ease, transform .16s ease; } #global .rch-real .rch-sc.is-on { opacity: 1; transform: none; transition: opacity .42s ease .18s, transform .52s cubic-bezier(.22, 1, .36, 1) .18s; } #global .rch-real .rch-sc-h { display: flex; align-items: center; gap: .65em; margin: 0; font-size: 1em; white-space: nowrap; } #global .rch-real .rch-sc-h > b { font-size: 1.3em; font-weight: 700; letter-spacing: -.02em; } #global .rch-real .rch-sc-h .rch-ex { margin: 0; color: #9fb0a7; } #global .rch-real .rch-sc-s { position: relative; flex: none; width: 12.5em; height: 2em; margin: 0 0 0 auto; } #global .rch-real .rch-sc-s > span { position: absolute; left: auto; right: 0; top: 0; display: inline-flex; align-items: center; gap: .45em; height: 2em; padding: 0 .85em; border-radius: 999px; font-size: .88em; font-weight: 600; line-height: 1; white-space: nowrap; transition: opacity .35s ease, transform .4s cubic-bezier(.22, 1, .36, 1); } #global .rch-real .rch-sc-s .w { background: none; box-shadow: inset 0 0 0 1px #f75b2b; color: #ffb69c; } #global .rch-real .rch-sc-s .d { padding-left: .5em; background: #f3f0e8; color: #101b1b; opacity: 0; transform: translateY(.4em); } #global .rch-real .rch-sc-s .d .rch-ok { width: 1.2em; height: 1.2em; border: 0; border-radius: 50%; background: #101b1b; } #global .rch-real .rch-sc-s .d .rch-ok::before { width: .46em; height: .24em; margin: .38em 0 0 .32em; border-left: .13em solid #f3f0e8; border-bottom: .13em solid #f3f0e8; } #global .rch-real .rch-sc.is-done .rch-sc-s .w { opacity: 0; transform: translateY(-.4em); } #global .rch-real .rch-sc.is-done .rch-sc-s .d { opacity: 1; transform: none; } #global .rch-real .rch-sc-b { margin-top: 1em; } #global .rch-real .rch-sc-b > div { min-width: 0; } #global .rch-real .rch-sc-i { margin: 0; padding: .8em .95em; border-radius: .7em; background: #162322; box-shadow: inset 0 0 0 1px #24353380; color: #fff; font-size: 1.05em; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; } #global .rch-real .rch-sc-i > span { display: block; margin-bottom: .2em; color: #8fa097; font-size: .84em; font-weight: 500; } #global .rch-real :is(.rch-sc-m, .rch-sc-l, .rch-sc-g) { margin: .85em 0 0; padding: 0; list-style: none; } #global .rch-real :is(.rch-sc-m, .rch-sc-l, .rch-sc-g) > li { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: .8em; padding: .5em 0; border-top: 1px solid #1f2d2c; color: #dfe7e1; line-height: 1.4; overflow-wrap: anywhere; } #global .rch-real :is(.rch-sc-m, .rch-sc-l, .rch-sc-g) > li > span { color: #8fa097; } #global .rch-real .rch-sc-m > li { font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, var(--au-text, system-ui, sans-serif); font-size: .92em; letter-spacing: -.01em; } #global .rch-real .rch-sc-m > li > span { font-family: var(--au-text, system-ui, sans-serif); font-size: 1.04em; } #global .rch-real .rch-sc-m > li.k { font-family: inherit; font-size: 1em; letter-spacing: inherit; } #global .rch-real .rch-sc-m > li.k > span { font-size: 1em; } #global .rch-real .rch-sc-g > li { grid-template-columns: 3.4em minmax(0, 1fr); } #global .rch-real .rch-sc-g > li > span { font-variant-numeric: tabular-nums; } #global .rch-real .rch-sc-g > .z { color: #fff; font-weight: 600; opacity: 0; transform: translateY(.3em); transition: opacity .4s ease, transform .45s cubic-bezier(.22, 1, .36, 1); } #global .rch-real .rch-sc.is-done .rch-sc-g > .z { opacity: 1; transform: none; } @container (max-width: 480px) { #global .rch-real .rch-md { display: flex; flex-direction: column; } #global .rch-real .rch-side { flex: none; padding: .55em .6em; border-right: 0; border-bottom: 1px solid #1f2d2c; } #global .rch-real .rch-side-h { display: none; } #global .rch-real .rch-ring { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .15em; } #global .rch-real .rch-chip > b { padding: .5em .6em; font-size: .95em; } #global .rch-real .rch-chip > b::after { display: none; } #global .rch-real .rch-scs { flex: 1; min-height: 0; } #global .rch-real .rch-sc { padding: .9em 1em 0; } #global .rch-real .rch-sc-h .rch-ex { display: none; } #global .rch-real .rch-sc-s { width: 11em; } #global .rch-real :is(.rch-sc-m, .rch-sc-l) > li { grid-template-columns: 4.6em minmax(0, 1fr); gap: .6em; } #global .rch-real .rch-sc-m > li { font-size: .86em; } #global .rch-real .rch-sc-m > li > span { font-size: 1.1em; } } @media (prefers-reduced-motion: reduce) { #global .rch-real :is(.rch-sc, .rch-sc.is-on, .rch-sc-s > span, .rch-sc-g > .z, .rch-chip > b) { transition: none; } } /* ── ③ 창구 목록 창 ── */ #global .rch-real .rch-dirh { display: flex; align-items: center; gap: .8em; padding: 1em 1.2em .2em; } #global .rch-real .rch-dirh .rl-q { color: #7a828a; font-size: 1em; height: 2.5em; } #global .rch-real .rch-dirh .rch-ex { color: #5b626a; } #global .rch-real .rch-dirf { padding: .75em 1.2em .8em; border-bottom: 1px solid #e6e8eb; } #global .rch-real .rch-orbit { position: static; left: auto; top: auto; width: auto; height: auto; display: grid; grid-template-columns: minmax(0, 1fr); animation: none; transform: none; } #global .rch-real .rch-tile { position: relative; left: auto; top: auto; width: auto; height: auto; margin: 0; transform: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: .7em; min-height: 3.05em; padding: 0 1.2em; border-bottom: 1px solid #eef0f2; white-space: nowrap; } #global .rch-real .rch-tile > .rl-fav { width: 1.9em; height: 1.9em; font-size: .78em; } #global .rch-real .rch-tile > b { position: static; display: block; width: auto; height: auto; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: none; box-shadow: none; color: #1d2125; font-size: 1em; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; animation: none; transform: none; } #global .rch-real .rch-tile > b::before, #global .rch-real .rch-tile > b::after { content: none; animation: none; } #global .rch-real .rch-tile > em { color: #7a828a; font-size: .86em; font-style: normal; transition: opacity .3s ease; } #global .rch-real .rch-tile::before { content: ""; position: absolute; inset: .22em .45em; border-radius: .6em; background: rgb(247 91 43 / .07); box-shadow: inset 0 0 0 1.5px #f75b2b; opacity: 0; transition: opacity .35s ease; pointer-events: none; } #global .rch-real .rch-tile::after { content: "요청서 작성"; position: absolute; right: 1em; top: 50%; display: inline-flex; align-items: center; height: 1.95em; margin-top: -.975em; padding: 0 .85em; border-radius: 999px; background: #f75b2b; color: #101b1b; font-size: .84em; font-weight: 700; line-height: 1; opacity: 0; transform: translateY(.3em); transition: opacity .35s ease, transform .4s cubic-bezier(.22, 1, .36, 1); } #global .rch-real .rch-tile.is-on::before { opacity: 1; } #global .rch-real .rch-tile.is-on::after { opacity: 1; transform: none; } #global .rch-real .rch-tile.is-on > em { opacity: 0; } @container (min-width: 560px) { #global .rch-real .rch-orbit { grid-template-columns: repeat(3, minmax(0, 1fr)); } #global .rch-real .rch-tile { border-right: 1px solid #eef0f2; } #global .rch-real .rch-dirh .rl-q { max-width: 24em; } } @container (max-width: 480px) and (min-width: 330px) { #global .rch-real .rch-orbit { grid-template-columns: repeat(2, minmax(0, 1fr)); } #global .rch-real .rch-tile { grid-template-columns: auto minmax(0, 1fr); padding: 0 .9em; border-right: 1px solid #eef0f2; } #global .rch-real .rch-tile > em { display: none; } #global .rch-real .rch-tile::after { right: .6em; } } @media (prefers-reduced-motion: reduce) { #global .rch-real .rch-tile::before, #global .rch-real .rch-tile::after, #global .rch-real .rch-tile > em { transition: none; } } /* ── 11-10 저녁 독립 검토 반영(#global · home-world) ── (08) 사건 기록 창: 고정폭 줄(.rch-sc-m · 글자 .92배 · 폰 .86배)만 이름 칸 폭(em)이 글자와 같이 줄어 값 칸이 7~10px 왼쪽에서 시작하던 것 → 그 줄만 이름 칸·사이를 글자 배율로 나눠 모든 줄의 값 칸 시작을 맞춤 · 폰은 이름 칸을 넓혀 '응답 머리글'이 두 줄로 꺾이지 않게 */ #global .rch-real .rch-sc-m > li:not(.k) { grid-template-columns: calc(6.2em / .92) minmax(0, 1fr); column-gap: calc(.8em / .92); } @container (max-width: 480px) { #global .rch-real :is(.rch-sc-m, .rch-sc-l) > li { grid-template-columns: 5.4em minmax(0, 1fr); } #global .rch-real .rch-sc-m > li:not(.k) { grid-template-columns: calc(5.4em / .86) minmax(0, 1fr); column-gap: calc(.6em / .86); } #global .rch-real :is(.rch-sc-m, .rch-sc-l) > li > span { white-space: nowrap; } } /* (09) 창구 목록 창: 좁은 창(360 폰 · 창 폭 320)에서 걸러보기 칩 여섯이 17px 길어 마지막 '커뮤니티' 칩이 창 끝에서 잘리던 것 → 칩 안쪽 여백·사이만 줄여 한 줄에 다 들어가게 */ @container (max-width: 340px) { #global .rch-real .rch-dirf { gap: .42em; padding-left: 1em; padding-right: 1em; } #global .rch-real .rch-dirf > .rl-chip { padding: 0 .7em; } } /* (05) 사건 기록 창 왼쪽 '요청 경로' 여섯 줄 아래가 창 바닥까지 빈 어두운 기둥(100~150px)으로 남던 것 → 옆 칸 바닥에 '보낸 곳' 진행 막대(경로 여섯 칸 · 지금 경로 앞까지 차 있고 장면이 '보냄'이 되면 한 칸 더 참 · 숫자 0) 움직임 = am-reach.js 가 바꾸는 .is-on · .is-done 을 :has() 로 읽어 막대가 차오름 · 폰(창 480 이하)은 경로가 위 칩 줄이라 뺌 */ #global .rch-real .rch-side { display: flex; flex-direction: column; } #global .rch-real .rch-side::before { content: "보낸 곳"; order: 2; margin: auto .7em 0; padding: .75em 0 0; border-top: 1px solid #1f2d2c; color: #7f8e86; font-size: .82em; font-weight: 600; line-height: 1.3; letter-spacing: .02em; } #global .rch-real .rch-side::after { content: ""; order: 3; flex: none; height: .42em; margin: .6em .7em 1.15em; border-radius: 999px; background-color: #2a3a38; background-image: repeating-linear-gradient(90deg, transparent 0 calc(100% / 6 - .3em), #0d1616 0 calc(100% / 6)), linear-gradient(#e9eee9, #e9eee9); background-size: calc(100% + .3em) 100%, calc((var(--rk-a, 0) + var(--rk-b, 0)) * (100% + .3em) / 6) 100%; background-position: 0 0, 0 0; background-repeat: no-repeat; transition: background-size .7s cubic-bezier(.22, 1, .36, 1); } #global .rch-real .rch-md:has(.rch-ring > .rch-chip:nth-child(2).is-on) { --rk-a: 1; } #global .rch-real .rch-md:has(.rch-ring > .rch-chip:nth-child(3).is-on) { --rk-a: 2; } #global .rch-real .rch-md:has(.rch-ring > .rch-chip:nth-child(4).is-on) { --rk-a: 3; } #global .rch-real .rch-md:has(.rch-ring > .rch-chip:nth-child(5).is-on) { --rk-a: 4; } #global .rch-real .rch-md:has(.rch-ring > .rch-chip:nth-child(6).is-on) { --rk-a: 5; } #global .rch-real .rch-md:has(.rch-sc.is-on.is-done) { --rk-b: 1; } @container (max-width: 480px) { #global .rch-real .rch-side::before, #global .rch-real .rch-side::after { display: none; } } @media (prefers-reduced-motion: reduce) { #global .rch-real .rch-side::after { transition: none; } }