feat(ui): apply inquiry list and modal design
Apply the supplied inquiry layout to the list and native write/detail dialogs while preserving existing API requests, author controls, attachments, comments and search. Keep legacy entry links and confirm before discarding drafts. Validation: 98 tests and syntax checks pass; mocked Chromium desktop/mobile and six author/session visibility scenarios pass.
This commit is contained in:
root committed
1 parent
dbf5dc3611
commit
c62630e22d
19 files changed
+1362
-277
No files matched your search
@@ -0,0 +1,4 @@
|
||||
<svg width="49" height="25" viewBox="0 0 49 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24.0908 13.3448C22.6196 13.866 21.8444 13.3729 21.499 13.0076L17.569 17.1999C14.2479 20.7127 10.2668 22.0667 7.24255 20.9018L22.942 4.29842C22.942 4.29842 24.5028 2.40791 26.2963 1.17907C26.4242 1.08965 26.4729 1.00279 26.4319 0.836734C26.327 0.422864 25.2754 0.149506 24.0243 0.154615L20.9003 0.16228C20.9003 0.16228 19.7515 0.116294 18.9916 0.164834C18.8329 0.172499 16.8296 0.256806 16.1515 0.31301C15.4607 0.369215 13.6748 0.645128 13.1759 0.765201C9.98791 1.53929 6.94063 2.91119 4.5765 5.34076C1.46271 8.53931 -0.156877 12.3229 0.0119895 15.9966C0.13736 18.7021 1.24523 21.0806 3.13346 22.6926C4.904 24.2051 7.12485 24.997 9.52225 24.9945C10.1389 24.9945 10.7657 24.9434 11.4002 24.8386C14.5345 24.3175 17.5971 22.5547 20.2632 19.7317L25.9458 13.6718C25.7565 13.4444 25.1961 12.9539 24.0908 13.3448ZM3.70914 15.828C3.58633 13.1839 4.82469 10.3634 7.22975 7.91595C10.0749 5.02142 12.3981 4.16047 14.5882 4.03528C15.6168 3.97652 16.5583 4.0966 17.5767 4.5539L4.42299 18.5003C4.00082 17.7288 3.7552 16.8193 3.70914 15.828Z" fill="#CA2829"/>
|
||||
<path d="M48.4759 8.82779C48.2174 6.07377 46.8537 3.61355 44.7352 2.07559C39.6743 -1.59559 33.7819 -0.356538 28.565 5.47341L22.6214 11.8092L22.125 12.3406C22.2427 12.4964 22.67 12.8771 23.783 12.4836C25.1569 11.9982 26.1036 12.5041 26.5744 13.0023L27.411 12.1055L31.2796 7.98473L31.3103 7.95151C35.2838 3.50369 39.0679 2.53033 42.5604 5.06465C43.8192 5.97925 44.6329 7.47633 44.7915 9.17269C45.032 11.7147 43.896 14.6169 41.3707 17.1333C37.8373 20.6537 34.442 21.7063 31.0084 20.6205L36.1025 15.0869L33.3802 12.5858L25.7633 20.8556C25.7633 20.8556 24.2512 22.6873 22.4934 23.9162C22.3015 24.0286 22.2248 24.1154 22.2734 24.3121C22.3732 24.7132 23.3659 24.9815 24.5659 24.9943L24.5761 24.9994H27.7539C27.7539 24.9994 30.4557 25.007 31.0263 24.9687C31.1338 24.9611 33.0502 24.8103 33.4288 24.7797C33.764 24.7541 35.4117 24.4629 35.7802 24.3709C39.0117 23.5713 41.6163 22.2658 44.0649 19.6676C47.2503 16.2902 48.8161 12.4402 48.4759 8.82779Z" fill="#263B7C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@@ -0,0 +1,25 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="_레이어_2" data-name="레이어_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 567.43 97.85">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #231815;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: #ca2829;
|
||||
}
|
||||
|
||||
.cls-3 {
|
||||
fill: #263b7c;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g id="_레이어_1-2" data-name="레이어_1">
|
||||
<g>
|
||||
<path class="cls-2" d="M94.16,52.23c-5.75,2.04-8.78.11-10.13-1.32l-15.36,16.41c-12.98,13.75-28.54,19.05-40.36,14.49L89.67,16.82s6.1-7.4,13.11-12.21h0c.5-.35.69-.69.53-1.34-.41-1.62-4.52-2.69-9.41-2.67h0l-12.21.03s-4.49-.18-7.46.01c-.62.03-8.45.36-11.1.58-2.7.22-9.68,1.3-11.63,1.77-12.46,3.03-24.37,8.4-33.61,17.91C5.72,33.42-.61,48.23.05,62.61c.49,10.59,4.82,19.9,12.2,26.21,6.92,5.92,15.6,9.02,24.97,9.01,2.41,0,4.86-.2,7.34-.61,12.25-2.04,24.22-8.94,34.64-19.99l22.21-23.72c-.74-.89-2.93-2.81-7.25-1.28h0ZM14.5,61.95c-.48-10.35,4.36-21.39,13.76-30.97,11.12-11.33,20.2-14.7,28.76-15.19,4.02-.23,7.7.24,11.68,2.03l-51.41,54.59c-1.65-3.02-2.61-6.58-2.79-10.46h0Z"/>
|
||||
<path class="cls-3" d="M189.47,34.55c-1.01-10.78-6.34-20.41-14.62-26.43-19.78-14.37-42.81-9.52-63.2,13.3l-23.23,24.8h0l-1.94,2.08c.46.61,2.13,2.1,6.48.56,5.37-1.9,9.07.08,10.91,2.03l3.27-3.51,15.12-16.13.12-.13c15.53-17.41,30.32-21.22,43.97-11.3,4.92,3.58,8.1,9.44,8.72,16.08.94,9.95-3.5,21.31-13.37,31.16-13.81,13.78-27.08,17.9-40.5,13.65l19.91-21.66-10.64-9.79-29.77,32.37s-5.91,7.17-12.78,11.98c-.75.44-1.05.78-.86,1.55.39,1.57,4.27,2.62,8.96,2.67l.04.02h12.42s10.56.03,12.79-.12c.42-.03,7.91-.62,9.39-.74,1.31-.1,7.75-1.24,9.19-1.6,12.63-3.13,22.81-8.24,32.38-18.41,12.45-13.22,18.57-28.29,17.24-42.43h0Z"/>
|
||||
<path class="cls-1" d="M219.27,89.13h48.33v-12.41h-33.74v-21.64h29.18v-12.31h-29.18v-19.75h33.25v-12.41h-47.84v78.5ZM276.24,49.83c0,20.64,6.25,40.69,29.97,40.69,9.33,0,16.18-4.47,18.96-10.82l1.98,9.43h10.42v-41.38h-29.67v11.61h15.58c-.69,11.21-4.66,18.76-16.08,18.76s-16.67-6.25-16.67-28.28,5.66-28.09,16.67-28.09c9.73,0,15.28,5.86,15.78,15.38h14.49c-.79-16.57-11.81-27.89-30.27-27.89-25.51,0-31.16,20.44-31.16,40.59h0ZM347.89,58.57h35.53v-11.91h-35.53v11.91ZM426.1,89.13c16.77,0,24.91-7.84,24.91-22.53,0-9.23-5.16-16.28-13.7-18.36,7.05-2.38,11.41-8.04,11.41-16.38,0-14.09-8.34-21.24-24.71-21.24h-29.67v78.5h31.76ZM436.42,65.91c0,7.94-4.27,10.82-13.2,10.82h-14.29v-21.73h14.29c8.93,0,13.2,2.98,13.2,10.92h0ZM434.24,32.86c0,7.54-4.57,9.83-12.9,9.83h-12.41v-19.65h12.41c8.34,0,12.9,2.28,12.9,9.83h0ZM475.43,10.63h-14.59v78.5h14.59V10.63ZM534.18,89.13l19.05-49.82v49.82h14.19V10.63h-15.48l-24.12,63.02-24.22-63.02h-15.48v78.5h14.19v-49.82l19.05,49.82h12.8Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,8 @@
|
||||
(function () {
|
||||
const url = new URL(window.location.href);
|
||||
const view = url.pathname.endsWith('/write.html') ? 'write' : 'detail';
|
||||
url.pathname = url.pathname.replace(/[^/]+$/, '');
|
||||
url.searchParams.set('view', view);
|
||||
if (view === 'write') url.searchParams.delete('id');
|
||||
window.location.replace(url.toString());
|
||||
})();
|
||||
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 300 120">
|
||||
<!-- Generator: Adobe Illustrator 28.7.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 136) -->
|
||||
<g>
|
||||
<g id="Layer_1">
|
||||
<g id="Layer_1-2" data-name="Layer_1">
|
||||
<path d="M0,33.8C0,11.5,16.9.4,32.8.4s32.8,11.1,32.8,33.4v6.9h-19.6v-6.9c0-9.4-6.1-13.8-13.2-13.8s-13.2,4.4-13.2,13.8v52.4c0,9.4,6.1,13.8,13.2,13.8s13.2-4.4,13.2-13.8v-15.8h-15.6v-17.3h35.1v33.1c0,22.3-16.9,33.5-32.8,33.5S0,108.5,0,86.2c0,0,0-52.4,0-52.4ZM116,1.5h16.3l30.5,117h-19.6l-5.8-25.1h-26.7l-5.8,25.1h-19.6L116,1.5ZM124.2,35.2h-.4l-9.6,42.4h19.6s-9.6-42.4-9.6-42.4ZM181.5,1.5h19.6v117h-19.6V1.5ZM253.1,1.5h16.3l30.5,117h-19.6l-5.8-25.1h-26.7l-5.8,25.1h-19.6L253.1,1.5ZM261.4,35.2h-.4l-9.6,42.4h19.6s-9.6-42.4-9.6-42.4Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 861 B |
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
@@ -0,0 +1,234 @@
|
||||
.inquiry-page { --inquiry-blue: #164b91; --inquiry-dark: #26374f; --inquiry-soft: #edf2f6; padding-top: 0; color: #202a38; }
|
||||
.inquiry-page *, .inquiry-dialog * { box-sizing: border-box; }
|
||||
.inquiry-page button, .inquiry-dialog button { font: inherit; }
|
||||
.inquiry-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%); white-space: nowrap; }
|
||||
.inquiry-page :focus-visible, .inquiry-dialog :focus-visible { outline: 2px solid #0c367f; outline-offset: 3px; }
|
||||
.inquiry-page input, .inquiry-dialog input, .inquiry-dialog textarea { user-select: text; }
|
||||
.inquiry-hero { --inquiry-hero-shade: transparent; height: 480px; position: relative; background: #0b2743 linear-gradient(var(--inquiry-hero-shade), var(--inquiry-hero-shade)) center / cover no-repeat; background-image: linear-gradient(var(--inquiry-hero-shade), var(--inquiry-hero-shade)), url(./inquiry-hero.webp); }
|
||||
.inquiry-hero__copy { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; padding: 40px 24px; }
|
||||
.inquiry-hero h1 { font-size: 70px; font-weight: 700; line-height: 1.4; letter-spacing: -0.04em; }
|
||||
.inquiry-hero p { font-size: 22px; line-height: 1.6; }
|
||||
.inquiry-workspace { position: relative; z-index: 1; width: min(1248px, 100%); padding: 0 24px; margin: -98px auto 120px; }
|
||||
.inquiry-tabs-shell { --inquiry-tab-curve: 28px; padding: 19px 32px 0; border-radius: 48px 48px 0 0; background: linear-gradient(180deg, #174b64a6, #082f43d9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 #74c7f4b3, inset 0 0 0 1px #5fadd666, inset 0 8px 16px #ffffff12, 0 -18px 12px #0a2f4843; }
|
||||
.inquiry-tabs { display: flex; gap: 60px; position: relative; isolation: isolate; }
|
||||
.inquiry-tabs button { position: relative; flex: 1; min-width: 0; min-height: 76px; padding: 8px 12px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 34px 34px 0 0; color: #b9d4e0a6; background: transparent; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
|
||||
.inquiry-tabs button:not([aria-selected="true"]):hover { color: #d6f0ff; background: #ffffff12; }
|
||||
.inquiry-tabs [aria-selected="true"] { z-index: 1; color: #00a2ef; background: linear-gradient(180deg, #e8f8ff 0%, #fff 58%); box-shadow: inset 0 2px 0 #ffffffb3, 0 -3px 10px #163f5b08; }
|
||||
/* Concave lower corners join the selected tab to the white board beneath it. */
|
||||
.inquiry-tabs [aria-selected="true"]::before,
|
||||
.inquiry-tabs [aria-selected="true"]::after { content: ""; position: absolute; bottom: 0; width: var(--inquiry-tab-curve); height: var(--inquiry-tab-curve); pointer-events: none; }
|
||||
.inquiry-tabs [aria-selected="true"]::before { left: calc(-1 * var(--inquiry-tab-curve)); background: radial-gradient(circle at 0 0, transparent calc(var(--inquiry-tab-curve) - 0.5px), #fff var(--inquiry-tab-curve)); }
|
||||
.inquiry-tabs [aria-selected="true"]::after { right: calc(-1 * var(--inquiry-tab-curve)); background: radial-gradient(circle at 100% 0, transparent calc(var(--inquiry-tab-curve) - 0.5px), #fff var(--inquiry-tab-curve)); }
|
||||
.inquiry-tab-logo { width: 156px; max-width: 94%; height: 33px; display: flex; align-items: center; justify-content: center; }
|
||||
.inquiry-tab-logo img { display: block; max-width: 100%; max-height: 33px; object-fit: contain; opacity: 0.48; filter: brightness(0) invert(1); transition: opacity 0.2s ease; }
|
||||
.inquiry-tabs [aria-selected="true"] .inquiry-tab-logo img { opacity: 1; filter: none; }
|
||||
.inquiry-tabs button:not([aria-selected="true"]):hover .inquiry-tab-logo img { opacity: 0.8; }
|
||||
.inquiry-tab-description { font-size: 16px; line-height: 1.5; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
|
||||
.inquiry-board { padding: 72px 6px 0; background: #fff; }
|
||||
.inquiry-board__heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; }
|
||||
.inquiry-board h2 { font-size: 24px; line-height: 1.5; font-weight: 600; text-align: left; word-break: keep-all; }
|
||||
.inquiry-remote { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid #c8d9ef; border-radius: 999px; color: var(--inquiry-blue); background: #fff; font-size: 14px; font-weight: 600; line-height: 1.4; white-space: nowrap; transition: background-color 0.2s ease; }
|
||||
.inquiry-remote:hover { background: #f0f5fc; }
|
||||
.inquiry-remote svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
|
||||
.inquiry-controls { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 28px; }
|
||||
.inquiry-filters { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
|
||||
.inquiry-categories { display: flex; gap: 6px; border: 0; }
|
||||
.inquiry-categories label { position: relative; cursor: pointer; }
|
||||
.inquiry-categories input { position: absolute; width: 1px; height: 1px; opacity: 0; }
|
||||
.inquiry-categories span { display: flex; align-items: center; justify-content: center; height: 44px; min-width: 60px; padding: 0 16px; border-radius: 999px; color: #758094; font-size: 15px; }
|
||||
.inquiry-categories label:hover span { background: var(--inquiry-soft); }
|
||||
.inquiry-categories input:checked + span { color: var(--inquiry-blue); background: #edf3fd; font-weight: 700; }
|
||||
.inquiry-categories input:focus-visible + span { outline: 2px solid #0c367f; outline-offset: 3px; }
|
||||
.inquiry-mine { display: inline-flex; align-items: center; gap: 8px; color: #697386; font-size: 13px; white-space: nowrap; cursor: pointer; }
|
||||
.inquiry-mine input { appearance: auto; width: 16px; height: 16px; accent-color: var(--inquiry-blue); }
|
||||
.inquiry-search { width: min(360px, 100%); display: flex; align-items: center; gap: 8px; padding: 0 6px 0 20px; border: 1px solid #e6e9ed; border-radius: 999px; background: #f7f8fa; }
|
||||
.inquiry-search input { flex: 1; min-width: 0; width: 100%; height: 44px; border: 0; padding: 0; color: #273448; font-size: 14px; background: transparent; }
|
||||
.inquiry-search input::placeholder { color: #9aa2b0; }
|
||||
.inquiry-search:focus-within { outline: 2px solid #528bdc; outline-offset: 2px; }
|
||||
.inquiry-search input:focus { outline: none; }
|
||||
.inquiry-search-button { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border: 0; border-radius: 50%; color: #35445b; background: transparent; cursor: pointer; }
|
||||
.inquiry-search-button:hover { background: #e9eef6; }
|
||||
.inquiry-search-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
|
||||
.inquiry-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 45px; padding: 0 20px; border: 1px solid transparent; border-radius: 3px; background: #27241d; color: #fff; font-size: 16px !important; font-weight: 700 !important; white-space: nowrap; cursor: pointer; }
|
||||
.inquiry-button:hover { background: #454035; }
|
||||
.inquiry-button svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
|
||||
.inquiry-table-scroll { overflow-x: auto; scrollbar-width: thin; }
|
||||
.inquiry-scroll-hint { display: none; }
|
||||
.inquiry-table { table-layout: fixed; min-width: 1024px; width: 100%; font-size: 16px; }
|
||||
.inquiry-table .col-number { width: 5%; }
|
||||
.inquiry-table .col-category { width: 8%; }
|
||||
.inquiry-table .col-company, .inquiry-table .col-team { width: 11%; }
|
||||
.inquiry-table .col-author { width: 8%; }
|
||||
.inquiry-table .col-date { width: 10%; }
|
||||
.inquiry-table .col-status { width: 9%; }
|
||||
.inquiry-table th { height: 48px; color: #657083; border-top: 1.5px solid var(--inquiry-dark); border-bottom: 1px solid #e5e9ef; font-weight: 500; text-align: center; white-space: nowrap; }
|
||||
.inquiry-table td { height: 60px; padding: 0 10px; text-align: center; color: #555; border-bottom: 1px solid #eee; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.inquiry-table .inquiry-notice { background: #f6f8fc; font-weight: 500; }
|
||||
.inquiry-notice .inquiry-subject { color: var(--inquiry-blue); }
|
||||
.inquiry-table tbody tr:hover { background: #fafafa; }
|
||||
.inquiry-table .inquiry-subject { text-align: left; }
|
||||
.inquiry-subject button { display: flex; align-items: center; gap: 6px; width: 100%; color: inherit; text-align: left; }
|
||||
.inquiry-subject button:hover { color: #08734c; }
|
||||
.inquiry-subject button > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.inquiry-comments { display: inline-flex; align-items: center; gap: 2px; color: #008cff; font-size: 14px; font-weight: 700; flex-shrink: 0; }
|
||||
.inquiry-comments svg { width: 15px; height: 15px; fill: currentColor; }
|
||||
.inquiry-status { display: inline-block; padding: 6px 10px; border-radius: 4px; font-size: 14px; line-height: 1.5; font-weight: 600; }
|
||||
.inquiry-status--new { color: #ef4444; background: #ef44441a; }
|
||||
.inquiry-status--done { color: #38b000; background: #38b00014; }
|
||||
.inquiry-status--review, .inquiry-status--patch { color: #777; background: #f0f0f0; }
|
||||
.inquiry-table .inquiry-empty { height: 280px; white-space: normal; }
|
||||
.inquiry-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 30px 0; }
|
||||
.inquiry-pagination button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-size: 14px; color: #555; }
|
||||
.inquiry-pagination [aria-current="page"] { background: #edf3fd; color: var(--inquiry-blue); }
|
||||
.inquiry-pagination button:disabled { opacity: 0.3; cursor: default; }
|
||||
.inquiry-pagination button:not(:disabled):hover { background: #eee; color: #111; }
|
||||
.inquiry-board__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
|
||||
.inquiry-preview-note { color: #999; font-size: 13px; font-weight: 400; line-height: 1.6; }
|
||||
.inquiry-write { min-width: 120px; border-radius: 999px; }
|
||||
|
||||
.inquiry-dialog { position: fixed; inset: 0; width: min(780px, calc(100% - 40px)); max-height: 88dvh; overflow: auto; margin: auto; border: 0; border-radius: 12px; padding: 32px; color: #222; background: #fff; box-shadow: 0 16px 60px #0004; }
|
||||
.inquiry-dialog::backdrop { background: #17212b99; }
|
||||
.inquiry-dialog__heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 2px solid #27241d; padding-bottom: 20px; margin-bottom: 20px; }
|
||||
.inquiry-dialog h2 { font-size: 24px; font-weight: 700; line-height: 1.5; word-break: keep-all; }
|
||||
.inquiry-close { font-size: 32px !important; line-height: 1; width: 36px; height: 36px; flex-shrink: 0; }
|
||||
.inquiry-detail__meta { color: #777; font-size: 14px; line-height: 1.8; }
|
||||
.inquiry-detail__body { min-height: 180px; padding: 28px 0; line-height: 1.8; white-space: pre-line; user-select: text; }
|
||||
.inquiry-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
|
||||
.inquiry-button--light { color: #333; background: #eee; }
|
||||
.inquiry-button--light:hover { background: #ddd; }
|
||||
.inquiry-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; }
|
||||
.inquiry-form-grid label, .inquiry-form-wide { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; }
|
||||
.inquiry-form-wide { margin-top: 20px; }
|
||||
.inquiry-dialog input, .inquiry-dialog select, .inquiry-dialog textarea { width: 100%; border: 1px solid #ddd; border-radius: 3px; padding: 10px 12px; min-height: 44px; font-size: 14px; background: #fff; font-weight: 400; }
|
||||
.inquiry-dialog textarea { resize: vertical; }
|
||||
.inquiry-dialog input:focus, .inquiry-dialog select:focus, .inquiry-dialog textarea:focus { border: 1px solid #1d8467; outline: 2px solid #1d846733; }
|
||||
.inquiry-form-feedback { font-size: 14px; color: #08734c; margin-top: 16px; }
|
||||
body:has(.inquiry-dialog[open]) { overflow: hidden; }
|
||||
/* Lock background scrolling only while a dialog is open; !important is needed to override layout.css html/body { overflow: visible !important }. */
|
||||
html.inquiry-modal-open,
|
||||
html.inquiry-modal-open body { overflow: hidden !important; }
|
||||
@media (max-width: 1000px) {
|
||||
.inquiry-scroll-hint { display: block; margin: 0 0 12px; text-align: right; color: #888; font-size: 12px; }
|
||||
.inquiry-controls { flex-wrap: wrap; gap: 20px; }
|
||||
.inquiry-search { width: 100%; max-width: none; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.inquiry-hero { --inquiry-hero-shade: rgba(5, 24, 44, 0.38); height: 340px; background-position: 22% center; }
|
||||
.inquiry-hero h1 { font-size: 48px; }
|
||||
.inquiry-hero p { font-size: 17px; }
|
||||
.inquiry-workspace { margin: -96px auto 72px; padding: 0 16px; }
|
||||
.inquiry-tabs-shell { --inquiry-tab-curve: 13px; padding: 12px 13px 0; border-radius: 30px 30px 0 0; }
|
||||
.inquiry-tabs { gap: 5px; }
|
||||
.inquiry-tabs button { min-height: 84px; padding: 8px 4px 12px; gap: 4px; border-radius: 22px 22px 0 0; }
|
||||
.inquiry-tab-logo { width: 145px; max-width: 100%; height: 28px; }
|
||||
.inquiry-tab-logo img { height: auto; max-height: 28px; }
|
||||
.inquiry-tabs [data-service="egbim"] img { width: 49px; height: 25px; }
|
||||
.inquiry-tabs [data-service="tova"] img { width: 80px; }
|
||||
.inquiry-tabs [data-service="gaia"] img { width: 58px; }
|
||||
.inquiry-tab-description { display: flex; align-items: center; justify-content: center; min-height: 29px; font-size: 11px; line-height: 1.3; white-space: normal; word-break: keep-all; }
|
||||
.inquiry-board { padding: 24px 4px 0; }
|
||||
.inquiry-board__heading { flex-wrap: nowrap; gap: 12px; margin-bottom: 22px; }
|
||||
.inquiry-board h2 { flex: 1 1 auto; font-size: 20px; }
|
||||
.inquiry-board__heading .inquiry-remote { flex-shrink: 0; margin-left: auto; }
|
||||
.inquiry-remote { gap: 6px; min-height: 40px; padding: 0 12px; font-size: 12px; }
|
||||
.inquiry-remote svg { width: 18px; height: 18px; }
|
||||
.inquiry-filters { width: 100%; flex-wrap: wrap; gap: 16px; }
|
||||
.inquiry-categories { width: 100%; gap: 6px; }
|
||||
.inquiry-categories label { flex: 1; }
|
||||
.inquiry-categories span { min-width: 0; padding: 0 12px; height: 44px; font-size: 14px; }
|
||||
.inquiry-controls { padding-bottom: 24px; }
|
||||
.inquiry-search input { font-size: 16px; }
|
||||
.inquiry-search-button { width: 40px; height: 40px; }
|
||||
.inquiry-board__bottom { align-items: flex-end; }
|
||||
.inquiry-preview-note { font-size: 12px; }
|
||||
.inquiry-dialog { padding: 24px 20px; width: calc(100% - 24px); }
|
||||
.inquiry-dialog h2 { font-size: 20px; }
|
||||
.inquiry-form-grid { grid-template-columns: 1fr; gap: 16px; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.inquiry-tabs button, .inquiry-tab-logo img, .inquiry-remote { transition: none; }
|
||||
}
|
||||
|
||||
/* Q&A uses its existing authentication, forms and data inside the reference layout. */
|
||||
.inquiry-page { overflow-x: clip; }
|
||||
.inquiry-page h1, .inquiry-page h2, .inquiry-page p, .inquiry-dialog h2, .inquiry-dialog h3 { margin: 0; }
|
||||
.inquiry-page fieldset { margin: 0; padding: 0; }
|
||||
.inquiry-table { border-collapse: collapse; }
|
||||
.inquiry-table tbody tr { cursor: pointer; }
|
||||
.inquiry-tabs button:disabled { cursor: default; }
|
||||
.inquiry-tabs button:disabled:hover { background: transparent; color: #b9d4e0a6; }
|
||||
.inquiry-tabs button:disabled:hover img { opacity: .48; }
|
||||
.inquiry-coming-soon { margin-left: 5px; font-size: 11px; font-weight: 400; }
|
||||
.inquiry-page .help-text { margin: 0 0 12px; }
|
||||
.inquiry-board__bottom .help-text { margin: 0; }
|
||||
.inquiry-table .subject-link { display: flex; align-items: center; gap: 5px; min-width: 0; color: inherit; }
|
||||
.inquiry-table .subject-link > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.inquiry-table .subject-link:hover { color: #08734c; }
|
||||
.inquiry-table .col-date { width: 14%; }
|
||||
.inquiry-table .col-status { width: 8%; }
|
||||
.inquiry-table .col-author { width: 7%; }
|
||||
.inquiry-table .lock { flex-shrink: 0; font-size: 12px; }
|
||||
.inquiry-table .table-empty { min-width: 1024px; }
|
||||
.inquiry-status--hold { color: #9b6414; background: #fff5df; }
|
||||
.inquiry-pagination { flex-wrap: wrap; }
|
||||
.inquiry-pagination button { border: 0; background: transparent; font-family: inherit; cursor: pointer; }
|
||||
.inquiry-dialog { overscroll-behavior: contain; }
|
||||
.inquiry-dialog [aria-busy="true"] .detail-card,
|
||||
.inquiry-dialog [aria-busy="true"] .comment-box { display: none; }
|
||||
.inquiry-dialog [hidden], .inquiry-page [hidden] { display: none !important; }
|
||||
.inquiry-dialog .inquiry-dialog__heading { align-items: flex-start; }
|
||||
.inquiry-dialog .inquiry-dialog__heading h2 { margin: 0; }
|
||||
.inquiry-close { border: 0; padding: 0; background: transparent; color: #111; cursor: pointer; }
|
||||
.inquiry-dialog .help-text { margin: 12px 0 0; line-height: 1.7; }
|
||||
.inquiry-dialog .inquiry-form-grid { margin: 24px 0; }
|
||||
.inquiry-dialog .inquiry-form-grid label { min-width: 0; }
|
||||
.inquiry-dialog .inquiry-form-wide { font-weight: 600; }
|
||||
.inquiry-dialog input[readonly], .inquiry-dialog select:disabled { color: #687282; background: #f7f8fa; }
|
||||
.inquiry-dialog input[type="checkbox"] { flex: 0 0 auto; width: 17px; height: 17px; min-height: 17px; margin: 0; accent-color: #164b91; }
|
||||
.inquiry-secret { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 14px; }
|
||||
.inquiry-dialog textarea { min-height: 136px; line-height: 1.8; }
|
||||
.inquiry-dialog input[type="file"] { padding: 9px 12px; font-size: 13px; }
|
||||
.inquiry-dialog .form-error { margin: 16px 0 0; padding: 12px 14px; border-radius: 4px; font-size: 14px; }
|
||||
.inquiry-dialog .detail-card { border-top: 0; padding-bottom: 0; }
|
||||
.inquiry-dialog .detail-head { padding: 0; border-bottom: 0; }
|
||||
.inquiry-detail__summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
||||
.inquiry-dialog .category { padding: 0; min-width: 0; color: #777; background: none; font-size: 13px; }
|
||||
.inquiry-dialog .status { min-width: 0; padding: 4px 8px; border: 0; border-radius: 4px; font-size: 12px; color: #777; background: #f0f0f0; }
|
||||
.inquiry-dialog .status[data-status="신규"] { color: #ef4444; background: #ef44441a; }
|
||||
.inquiry-dialog .status[data-status="완료"] { color: #38b000; background: #38b00014; }
|
||||
.inquiry-dialog .status[data-status="보류"] { color: #9b6414; background: #fff5df; }
|
||||
.inquiry-dialog .detail-meta { padding-top: 10px; gap: 6px; font-size: 13px; line-height: 1.8; }
|
||||
.inquiry-dialog .detail-meta span + span::before { content: '·'; width: auto; height: auto; margin: 0 6px 0 0; background: none; }
|
||||
.inquiry-dialog .detail-body { min-height: 160px; padding: 28px 0; line-height: 1.8; }
|
||||
.inquiry-dialog .attachments { padding: 16px 0; background: none; }
|
||||
.inquiry-dialog .attachments h3 { margin: 0 0 8px; }
|
||||
.inquiry-dialog .detail-actions { padding: 0; margin: 20px 0 0; }
|
||||
.inquiry-dialog .button { min-height: 38px; height: auto; padding: 9px 16px; border-radius: 3px; font-size: 13px; }
|
||||
.inquiry-dialog .button-primary { border-color: #27241d; background: #27241d; }
|
||||
.inquiry-dialog .button-primary:hover { background: #454035; }
|
||||
.inquiry-dialog .button:disabled, .inquiry-button:disabled { opacity: .6; cursor: wait; }
|
||||
.inquiry-dialog .comment-box { margin-top: 32px; }
|
||||
.inquiry-dialog .comment-box h3 { padding-bottom: 14px; font-size: 16px; }
|
||||
.inquiry-dialog .comment { padding: 16px 0; }
|
||||
.inquiry-dialog .comment-form { padding: 18px 0 0; }
|
||||
.inquiry-dialog .comment-form textarea { min-height: 120px; }
|
||||
.inquiry-dialog .comment-form-actions { flex-wrap: wrap; }
|
||||
.inquiry-dialog .comment-edit-input { min-height: 96px; }
|
||||
.inquiry-dialog .edit-form { padding-top: 8px; }
|
||||
.inquiry-dialog .is-editing > .detail-card { display: none; }
|
||||
.inquiry-dialog .edit-form .select { max-width: none; }
|
||||
.inquiry-dialog .form-row { display: block; min-height: 0; padding: 0; margin: 20px 0 0; border: 0; }
|
||||
.inquiry-dialog .form-label { display: block; padding: 0; margin-bottom: 8px; background: none; font-size: 14px; font-weight: 600; }
|
||||
.inquiry-dialog .form-control { padding: 0; }
|
||||
.inquiry-dialog .form-footer { justify-content: flex-end; padding-top: 24px; }
|
||||
.inquiry-dialog .completion-notice { margin: 20px 0; font-size: 13px; }
|
||||
.inquiry-dialog .completion-notice p { margin: 4px 0 0; }
|
||||
.inquiry-dialog .inquiry-dialog__actions { clear: both; }
|
||||
@media (max-width: 600px) {
|
||||
.inquiry-dialog input, .inquiry-dialog select, .inquiry-dialog textarea { font-size: 16px; }
|
||||
.inquiry-coming-soon { display: block; margin-left: 0; font-size: 9px; }
|
||||
.inquiry-tabs button:disabled .inquiry-tab-description { flex-direction: column; gap: 2px; }
|
||||
.inquiry-dialog .comment-meta { gap: 8px; flex-wrap: wrap; }
|
||||
.inquiry-dialog .completion-notice { flex-direction: column; align-items: stretch; }
|
||||
.inquiry-dialog .inquiry-dialog__actions { flex-wrap: wrap; }
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 602 150">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #000;
|
||||
}
|
||||
|
||||
.cls-1, .cls-2 {
|
||||
stroke-width: 0px;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: #ffde00;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g id="letter">
|
||||
<path id="obj1" class="cls-1" d="M295.8,73.5c0,40.6-33.1,73.5-73.9,73.5s-73.9-32.9-73.9-73.5S181,0,221.9,0h73.9l-43.5,43.2h-30.5c-16.8,0-30.5,13.6-30.5,30.3s13.6,30.3,30.5,30.3h30.5l43.5-43.2M497.7,0h-51.9l-99.6,118.5V0h-43.3v149.2h68.9L497.7,0ZM563.7,107.2l-22.8-35.5h-8.5L521.5,0h-14.6l-36.6,43.5h15.7l4.3,28.1h-43.6l-29.9,35.5h78.9l6.4,42h42.2l-6.4-42h25.9,0ZM180.8,0H34L0,43.5h58.4v105.6h43V43.5h41.7C150.3,25,163.7,9.6,180.8,0Z"/>
|
||||
</g>
|
||||
<g id="obj">
|
||||
<path id="obj2" class="cls-2" d="M295.8,38.6l-43.5,43.2v8.4l43.5-43.2M295.8,15.6l-43.5,43.2v8.4l43.5-43.2M553.7,71.7h-7.3l22.8,35.5h7.3l-22.8-35.5ZM578.3,71.7h-7.3l22.8,35.5h7.3l-22.8-35.5ZM565.8,71.7h-7.2l22.8,35.5h7.3l-22.8-35.5h0Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Reference in new issue
Block a user