/* ========================================================================= ㈜ 인터에티 — /work 봉투 인쇄 (envelope printing) Loaded only by work.html. Everything here is additive; styles.css is untouched. Two things must stay in this file and never migrate to styles.css: - the @font-face rules (see NotoKR note below) - the @page rule, which has no scoping mechanism and would otherwise make all 25 pages print as 220x105mm envelopes Bands: 1) Font 2) Gate 3) Tool UI 4) Preview 5) Envelope 6) Print ========================================================================= */ /* ----------------------------- 1) FONT ---------------------------------- */ /* Family is 'NotoKR', deliberately NOT 'Noto Sans KR': the sitewide --font chain in styles.css already ends in 'Noto Sans KR', so using that name here would hijack the fallback font for all 25 pages if this file ever leaked into the global stylesheet. A distinct name makes that impossible. */ @font-face { font-family: 'NotoKR'; src: url('/assets/fonts/NotoSansKR-kr-400.v1.woff2') format('woff2'); font-weight: 400; font-style: normal; /* block, not swap: printing during the swap period would lay out with the fallback font's metrics — wrong line widths on paper you cannot un-mail. */ font-display: block; } @font-face { font-family: 'NotoKR'; src: url('/assets/fonts/NotoSansKR-kr-700.v1.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* The shipped Pretendard subset carries only 400 of 11172 Hangul syllables (홍 is missing), so arbitrary renter names would render mid-word in a system fallback. NotoKR has all of them and is already being downloaded for the envelope, so scoping the whole page to it costs nothing and removes the problem structurally. Overriding --font re-fonts the shared header and footer too, without touching styles.css. */ body.work { --font: 'NotoKR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; --w-line: var(--line); --w-field-h: 44px; --w-warn: #b8860b; --w-warn-bg: #fdf6e3; --w-err: #c0392b; --w-err-bg: #fdf0ee; } /* ----------------------------- 2) GATE ---------------------------------- */ /* is the markup default; an inline script removes it when the cookie is present. That runs before is parsed, so whichever half is wrong for this visitor is already hidden by the time anything paints — no flash in either direction — and with JS off the page stays gated (the tool needs JS anyway). */ html.gated #tool { display: none; } html:not(.gated) #gate { display: none; } .gate-wrap { padding-block: clamp(3rem, 2rem + 6vw, 7rem); } .gate-card { max-width: 420px; margin-inline: auto; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); } .gate-card .lock { width: 40px; height: 40px; color: var(--green); margin: 0 auto .9rem; } .gate-card h1 { font-size: 1.5rem; margin-bottom: .2rem; } .gate-card .en { color: var(--muted-text); font-size: .88rem; margin-bottom: 1.6rem; } .gate-card form { display: flex; flex-direction: column; gap: .8rem; } .gate-err { color: var(--w-err); background: var(--w-err-bg); border: 1px solid #f0c8c2; border-radius: var(--radius-sm); padding: .6rem .9rem; font-size: .9rem; } .gate-err:empty { display: none; } .gate-note { margin-top: 1.2rem; font-size: .82rem; color: var(--muted-text); line-height: 1.5; } /* ----------------------------- 3) TOOL UI -------------------------------- */ .w-form { display: grid; gap: .55rem; } .w-form label, .w-label { font-weight: 600; color: var(--ink); font-size: .93rem; } .w-form label .en, .w-label .en, .w-sub { font-family: var(--display); font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-text); margin-left: .45rem; } input[type="text"], input[type="password"], input[type="number"], select, textarea { font: inherit; width: 100%; min-height: var(--w-field-h); padding: .55rem .8rem; color: var(--ink); background: #fff; border: 1px solid var(--w-line); border-radius: var(--radius-sm); transition: border-color .18s, box-shadow .18s; } input:hover, select:hover { border-color: #cddcc0; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(72, 159, 55, .16); } input[disabled], select[disabled] { background: var(--bg-soft); color: var(--muted-text); cursor: not-allowed; } select { appearance: none; padding-right: 2.2rem; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366705f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; background-size: 18px; } .w-check { display: flex; align-items: center; gap: .5rem; font-weight: 500; cursor: pointer; } .w-check input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--green); flex: none; cursor: pointer; } .w-hint { font-size: .82rem; color: var(--muted-text); } .w-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; box-shadow: var(--shadow-sm); } .w-panel + .w-panel { margin-top: 1.1rem; } .w-panel > h2 { font-size: 1.12rem; margin-bottom: .25rem; display: flex; align-items: baseline; flex-wrap: wrap; } .w-panel > h2 .en { font-family: var(--display); font-weight: 600; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-text); margin-left: .5rem; } .w-panel > .w-hint { margin-bottom: 1rem; } .w-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 1.1rem; align-items: start; } .w-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; } .w-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; } .w-actions .spacer { flex: 1 1 auto; } .btn--sm { padding: .5rem 1rem; min-height: 38px; font-size: .9rem; box-shadow: none; } .btn--sm:hover { transform: none; box-shadow: none; } .btn[disabled] { opacity: .45; pointer-events: none; } .btn--danger { --bg: #c0392b; --fg: #fff; box-shadow: 0 4px 12px rgba(192, 57, 43, .22); } .btn--danger:hover { background: #a5301f; box-shadow: 0 4px 12px rgba(192, 57, 43, .3); } /* Logout lives in the site header on this page only, and must not show while the gate is up (the header sits outside #tool). */ .nav__logout { display: flex; align-items: center; margin-left: .3rem; } html.gated .nav__logout { display: none; } @media (max-width: 900px) { .nav__logout { margin: .6rem 0 0; } .nav__logout .btn { width: 100%; justify-content: center; min-height: 48px; } } /* Print action gets its own panel at the top of the output column. */ .w-print { display: grid; gap: .6rem; justify-items: stretch; text-align: center; } .w-print .btn { justify-content: center; } /* Tabs */ .w-tabs { display: flex; gap: .4rem; margin-bottom: 1.1rem; border-bottom: 2px solid var(--line); } .w-tabs button { padding: .7rem 1.1rem; font-weight: 600; color: var(--muted-text); border-bottom: 2px solid transparent; margin-bottom: -2px; } .w-tabs button[aria-selected="true"] { color: var(--green-dd); border-bottom-color: var(--green); } /* Drop zone */ .w-drop { border: 2px dashed #cddcc0; border-radius: var(--radius); background: var(--bg-soft); padding: 2rem 1.2rem; text-align: center; transition: background .2s, border-color .2s; } .w-drop.is-over { background: var(--bg-soft2); border-color: var(--green); } .w-drop svg { width: 34px; height: 34px; color: var(--green); margin: 0 auto .7rem; } .w-drop p { color: var(--muted-text); font-size: .93rem; margin-bottom: .9rem; } /* Field list */ .w-fields { display: grid; gap: .4rem; } .w-field { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .6rem; align-items: center; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-soft); } .w-field.is-off { opacity: .55; } .w-field__name { font-weight: 600; font-size: .92rem; min-width: 0; } .w-field__name small { display: block; font-weight: 400; color: var(--muted-text); font-size: .76rem; } .w-field__opts { display: flex; gap: .35rem; align-items: center; } .w-field__opts input[type="text"] { width: 4.5rem; min-height: 32px; padding: .25rem .45rem; font-size: .85rem; text-align: center; } .w-move { display: flex; flex-direction: column; gap: 1px; } .w-move button { width: 26px; height: 18px; line-height: 1; font-size: .7rem; color: var(--muted-text); border: 1px solid var(--line); background: #fff; border-radius: 4px; } .w-move button:hover { color: var(--green-dd); border-color: var(--green); } .w-badge { font-size: .7rem; font-weight: 700; letter-spacing: .04em; padding: .1rem .4rem; border-radius: 4px; background: var(--bg-soft2); color: var(--green-dd); } /* Messages */ .w-msg { border-radius: var(--radius-sm); padding: .7rem .95rem; font-size: .9rem; margin-bottom: .9rem; } .w-msg:empty { display: none; } .w-msg.is-warn { background: var(--w-warn-bg); border: 1px solid #ecd9a3; color: #7a5c05; } .w-msg.is-err { background: var(--w-err-bg); border: 1px solid #f0c8c2; color: var(--w-err); } .w-msg.is-ok { background: var(--bg-soft2); border: 1px solid #cddcc0; color: var(--green-dd); } /* Row table — reuses .spec-wrap/.spec-table from styles.css for the guide, but the data grid needs to stay scrollable rather than stack. */ .w-tablewrap { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); } .w-table { width: 100%; font-size: .9rem; border-collapse: collapse; } .w-table th, .w-table td { padding: .5rem .7rem; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; } .w-table thead th { position: sticky; top: 0; z-index: 1; background: var(--green); color: #fff; font-weight: 600; } .w-table tbody tr.is-bad { background: var(--w-err-bg); } .w-table tbody tr.is-dupe { background: var(--w-warn-bg); } .w-table tbody tr.is-current td:first-child { box-shadow: inset 3px 0 0 var(--green); } .w-table td.flag { font-size: .78rem; font-weight: 600; } .w-table tr.is-bad td.flag { color: var(--w-err); } .w-table tr.is-dupe td.flag { color: var(--w-warn); } .w-table .rownum { color: var(--muted-text); font-variant-numeric: tabular-nums; } .w-del { color: var(--muted-text); font-size: 1rem; line-height: 1; padding: .15rem .35rem; } .w-del:hover { color: var(--w-err); } /* Formatting guide: a mock of the actual spreadsheet, so the columns read as columns. The old version listed each column as a table ROW, which is the opposite of what the operator sees in Excel. */ .w-sheetwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); } .w-sheet { width: max-content; min-width: 100%; border-collapse: collapse; font-size: .86rem; } .w-sheet td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .45rem .7rem; white-space: nowrap; color: var(--ink); background: #fff; } .w-sheet tr:last-child td { border-bottom: 0; } .w-sheet td:last-child { border-right: 0; } .w-sheet .gut { background: var(--bg-soft2); color: var(--muted-text); font-size: .75rem; text-align: center; font-variant-numeric: tabular-nums; position: sticky; left: 0; min-width: 2.2rem; } .w-sheet .is-colhead td { background: var(--bg-soft2); color: var(--muted-text); font-size: .72rem; text-align: center; font-family: var(--display); font-weight: 600; letter-spacing: .08em; } .w-sheet .is-head td { background: var(--bg-soft); font-weight: 700; color: var(--green-dd); } .w-sheet .is-head .gut { background: var(--bg-soft2); color: var(--muted-text); font-weight: 400; } .w-coldoc { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: .5rem .9rem; } .w-coldoc > div { display: grid; grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr); gap: .1rem .9rem; align-items: baseline; padding: .55rem .7rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); } .w-coldoc dt { font-weight: 700; color: var(--ink); font-size: .92rem; } .w-coldoc dt span { display: block; font-family: var(--display); font-weight: 600; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-text); } .w-coldoc dd { margin: 0; font-size: .88rem; color: var(--body); line-height: 1.55; } .w-coldoc dd em { display: inline-block; font-style: normal; font-size: .7rem; font-weight: 700; padding: .05rem .4rem; margin-right: .45rem; border-radius: 4px; vertical-align: 1px; background: var(--bg-soft2); color: var(--muted-text); } .w-coldoc dd em.req { background: var(--green); color: #fff; } .w-coldoc code, .w-hint code { font-size: .85em; background: var(--bg-soft2); padding: .05rem .3rem; border-radius: 4px; } /* ----------------------------- 4) PREVIEW -------------------------------- */ .preview-stage { position: relative; width: 100%; aspect-ratio: var(--env-w-n, 220) / var(--env-h-n, 105); overflow: hidden; background: #fff; border-radius: var(--radius-sm); /* The frame is drawn with a box-shadow, not a border: box-sizing is border-box sitewide, so a 1px border would shrink the aspect-ratio box and clip the bottom of the envelope. A shadow takes no layout space, so clientWidth stays exactly the envelope width and the preview stays true. */ box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); } .preview-stage > .env-page { position: absolute; top: 0; left: 0; transform: scale(var(--scale, 1)); transform-origin: 0 0; } /* on-screen affordance only — never printed */ .preview-stage .env-page { outline: 1px dashed #d8e3cd; outline-offset: -1px; } .preview-nav { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: .7rem; } .preview-nav button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: var(--green-dd); } .preview-nav button:hover:not([disabled]) { background: var(--bg-soft); border-color: var(--green); } .preview-nav button[disabled] { opacity: .35; cursor: not-allowed; } .preview-nav .count { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--muted-text); font-size: .9rem; } /* ----------------------------- 5) ENVELOPE ------------------------------- */ /* The same element is used by the preview and the print sheet — only a visual transform differs — so WYSIWYG holds by construction. */ .env-page { position: relative; box-sizing: border-box; width: var(--env-w, 220mm); height: var(--env-h, 105mm); margin: 0; padding: 0 var(--env-right, 15mm) var(--env-bottom, 15mm) 0; border: 0; overflow: hidden; background: #fff; display: flex; align-items: flex-end; justify-content: flex-end; break-inside: avoid; page-break-inside: avoid; } /* Default placement: centred on the envelope both ways. The margin controls only apply to the bottom-right mode, so they are zeroed here and a small symmetric gutter keeps a long line off the edge. */ .env-page.is-center { align-items: center; justify-content: center; padding: 0 6mm; } .env-page.is-center > .env-text { text-align: center; } .env-page.is-flip > .env-text { transform: rotate(180deg) translate(calc(-1 * var(--nudge-x, 0mm)), calc(-1 * var(--nudge-y, 0mm))); } .env-text { text-align: right; font-family: 'NotoKR', 'Malgun Gothic', 'Microsoft YaHei', sans-serif; font-weight: var(--env-weight, 400); font-size: var(--env-fs, 26pt); line-height: var(--env-lh, 1.45); letter-spacing: var(--env-ls, 0); color: #000; /* pure K, not the site's --ink */ font-variant-numeric: tabular-nums; /* dates line up across a batch */ /* styles.css sets word-break:keep-all + overflow-wrap:anywhere on body, which would break a long name mid-syllable. */ white-space: nowrap; overflow-wrap: normal; word-break: normal; transform: translate(var(--nudge-x, 0mm), var(--nudge-y, 0mm)); } .env-line { display: block; } .env-line.is-empty { display: none; } /* Calibration sheet */ .env-cal { position: absolute; inset: 0; color: #000; } .env-cal .rule { position: absolute; background: #000; } .env-cal .tick { position: absolute; background: #000; } .env-cal .lab { position: absolute; font-size: 7pt; font-family: 'NotoKR', sans-serif; color: #000; } .env-cal .crop { position: absolute; background: #000; } .env-cal .target { position: absolute; border: .3mm solid #000; } .env-cal .note { position: absolute; left: 10mm; top: 8mm; font-size: 9pt; line-height: 1.4; max-width: 150mm; } /* ----------------------------- 6) PRINT ---------------------------------- */ #print-sheet { display: none; } @media print { /* The UA default body{margin:8px} offsets a 220mm block enough to overflow the page box horizontally — one extra near-blank page per envelope. */ html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; width: auto !important; } body > *:not(#print-sheet) { display: none !important; } /* font-size:0 neutralises whitespace text nodes between page divs, which otherwise add a stray line box and push a blank page out. */ #print-sheet { display: block !important; margin: 0; padding: 0; font-size: 0; line-height: 0; } /* break-BEFORE on adjacent siblings rather than break-after + a :last-child reset: there is no last-element case to forget, so it fails closed. */ #print-sheet > .env-page + .env-page { break-before: page; page-break-before: always; } .env-page { background: none !important; box-shadow: none !important; border: 0 !important; outline: 0 !important; } .env-text { line-height: var(--env-lh, 1.45); } /* the calibration sheet's rules and ticks must survive Chrome's default "don't print backgrounds" */ #print-sheet, #print-sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* ----------------------------- RESPONSIVE -------------------------------- */ @media (max-width: 900px) { .w-cols { grid-template-columns: 1fr; } .w-field { grid-template-columns: auto minmax(0, 1fr) auto; } .w-field__opts { grid-column: 1 / -1; justify-content: flex-end; } }