@charset "utf-8";
 
:root {
  --hli-color-background-0: #FFFFFF;
  --hli-color-background-1: #F5F5F5;
  --hli-color-background-dimmed: rgba(0,0,0,0.5);

  --hli-color-surface-primary: #FA6600;
  --hli-color-surface-secondary: #403F3E;
  --hli-color-surface-neutral: #FFFFFF;
  --hli-color-surface-neutral-1: #F5F5F5;
  --hli-color-surface-neutral-2: #F0F0F0;
  --hli-color-surface-neutral-3: #E5E4E3;

  --hli-color-text-primary: #FA6600;
  --hli-color-text-primary-1: #bf4c00;
  --hli-color-text-body: #272B2F;
  --hli-color-text-body-1: #403F3E;
  --hli-color-text-body-2: #5E5C5A;
  --hli-color-text-body-3: #7E7C7A;
  --hli-color-text-body-0: #FFFFFF;
  --hli-color-text-neutral-1: #908F8E;
  --hli-color-text-neutral-2: #B4B3B2;

  --hli-color-border-1: #F5F5F5;
  --hli-color-border-2: #F0F0F0;
  --hli-color-border-3: #E5E4E3;
  --hli-color-border-4: #908F8E;
  --hli-color-border-5: #403F3E;

  --hli-color-additional-semantic-1: #009CA5;
  --hli-color-additional-semantic-2: #F53F3F;
  --hli-color-additional-semantic-3: #F8B62B;
  --hli-color-additional-semantic-4: #B4B3B2;
  --hli-color-additional-custom-1: #819EDE;
  --hli-color-additional-custom-2: #FF8F4C;
  --hli-color-additional-custom-3: #FACD5F;

  --hli-color-state-dark-1: rgba(0, 0, 0, 0.02);
  --hli-color-state-dark-2: rgba(0, 0, 0, 0.1);
  --hli-color-state-dark-3: rgba(0, 0, 0, 0.16);
  --hli-color-state-light-1: rgba(255, 255, 255, 0.6);

  --hli-font-size-title-xxxlarge: 2.375rem;
  --hli-font-size-title-xxlarge: 1.875rem;
  --hli-font-size-title-xlarge: 1.625rem;
  --hli-font-size-title-large:  1.375rem;
  --hli-font-size-title-medium: 1.25rem;
  --hli-font-size-title-small:  1.125rem;
  --hli-font-size-title-xsmall: 1rem;

  --hli-font-size-text-large:   1.125rem;
  --hli-font-size-text-medium:  1rem;
  --hli-font-size-text-small:   0.875rem;
  --hli-font-size-text-xsmall:  0.75rem;

  --hli-font-weight-bold: 700;
  --hli-font-weight-regular: 400;
  --hli-font-weight-light: 300;

  --hli-font-line-height-large: 1.5;
  --hli-font-line-height-medium: 1.4;

  --hli-spacing-xxxlarge: 3rem;
  --hli-spacing-xxlarge: 2rem;
  --hli-spacing-xlarge: 1.75rem;
  --hli-spacing-large: 1.5rem;
  --hli-spacing-medium: 1.25rem;
  --hli-spacing-small: 1rem;
  --hli-spacing-xsmall: 0.75rem;
  --hli-spacing-xxsmall: 0.5rem;
  --hli-spacing-xxxsmall: 0.25rem;

  --hli-border-radius-xxlarge: 100px;
  --hli-border-radius-xlarge: 16px;
  --hli-border-radius-large: 12px;
  --hli-border-radius-medium: 8px;
  --hli-border-radius-small: 4px;

  --hli-box-shadow-large: rgba(0,0,0,0.10);
  --hli-box-shadow-medium: rgba(0,0,0,0.08);
  --hli-box-shadow-small: rgba(0,0,0,0.02);

  --hli-z-index-level-1: 1;
  --hli-z-index-level-2: 2;
  --hli-z-index-level-3: 3;
  --hli-z-index-level-4: 4;
  --hli-z-index-level-5: 5;
  --hli-z-index-level-6: 6;
  --hli-z-index-level-7: 7;
  --hli-z-index-modal: 1000;
  --hli-z-index-spinner: 2000;

  --hli-color-active-ring: #403F3E;

  --hli-color-selection-background: #fde69a;
  --hli-color-selection-text: #212121;
}

@font-face {
    font-family: 'HanwhaGothic';
    font-weight: 700;
    src: local('HanwhaGothic'),
    url('https://static.hanwhalife.com/static/ds/font/hanwha-gothic/04HanwhaGothicB.woff2') format('woff2'),
    url('https://static.hanwhalife.com/static/ds/font/hanwha-gothic/04HanwhaGothicB.woff') format('woff');
}
/*
@font-face {
    font-family: 'HanwhaGothic';
    font-weight: 400;
    src: local('HanwhaGothic'),
    url('https://static.hanwhalife.com/static/ds/font/hanwha-gothic/05HanwhaGothicR.woff2') format('woff2'),
    url('https://static.hanwhalife.com/static/ds/font/hanwha-gothic/05HanwhaGothicR.woff') format('woff');
}
*/
@font-face {
    font-family: 'HanwhaGothic';
    font-weight: 400;
    src: local('HanwhaGothic'),
    url('https://static.hanwhalife.com/static/ds/font/hanwha-gothic/06HanwhaGothicL.woff2') format('woff2'),
    url('https://static.hanwhalife.com/static/ds/font/hanwha-gothic/06HanwhaGothicL.woff') format('woff');
}


/* designsystem reset */
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) {
  :root { scroll-behavior: smooth; }
}

html, body {
    font-family: 'HanwhaGothic', -apple-system, system-ui, HelveticaNeue, AppleSDGothicNeo, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}
body { margin: 0; }
hr { margin: 1rem 0; color: inherit; background-color: currentColor; border: 0; opacity: 0.25; }
hr:not([size]) { height: 1px; }
h6, h5, h4, h3, h2, h1 { margin: 0; font-weight: 600; line-height: 1.2; }
p { margin: 0; }
abbr[title], abbr[data-bs-original-title] { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; cursor: help; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; }
address { margin-bottom: 1rem; font-style: normal; line-height: inherit; }
ol, ul { list-style: none; }
ol, ul, dl, li { padding: 0; margin: 0; }
b, strong { font-weight: bolder; }
small { font-size: 0.875em; }
a { color: inherit; text-decoration: none; }
a:not([href], [class]), a:not([href], [class]):hover { color: inherit; text-decoration: none; }
figure { margin: 0; }
img, svg { vertical-align: top; }
img { max-width: 100%; }
table { caption-side: bottom; border-collapse: collapse; }
caption { padding-top: 0.5rem; padding-bottom: 0.5rem; color: #6c757d; text-align: left; }
th { text-align: inherit; text-align: -webkit-match-parent; }
thead, tbody, tfoot, tr, td, th { border-color: inherit; border-style: solid; border-width: 0; }
label { display: inline-block; }
button { border-radius: 0; }
input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button, select { text-transform: none; }
[role='button'] { cursor: pointer; }
select { word-wrap: normal; }
[list]::-webkit-calendar-picker-indicator { display: none; }
button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; }
button:not(:disabled), [type='button']:not(:disabled), [type='reset']:not(:disabled), [type='submit']:not(:disabled) { cursor: pointer; }
::-moz-focus-inner { padding: 0; border-style: none; }
button:focus:not(:focus-visible) { outline: 0; }
textarea { resize: vertical; }
fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
legend { float: left; width: 100%; padding: 0; margin-bottom: 0.5rem; font-size: calc(1.275rem + 0.3vw); line-height: inherit; }
legend + * { clear: left; }
output { display: inline-block; }
iframe { border: 0; }
summary { display: list-item; cursor: pointer; }
progress { vertical-align: baseline; }
[hidden] { display: none !important; }
strong { font-weight: 700; }

/* focus-ring */
*:focus-visible {
    outline: none;
    outline: 1px solid var(--hli-color-active-ring, #403F3E);
}

/*
* {
    transition: all 0.3s ease-in-out 0.1s;
}
*/

.hidden { display: none !important; visibility: hidden !important; }

/* component */
button {
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 0px;
    background: #93A8C2;
    color: #fff;

    line-height: 1.5;
    height: 2.5rem;
    padding: 0px 1rem;
    border-radius: var(--hli-border-radius-medium, 8px);
    font-size: var(--hli-font-size-text-medium, 1.125rem);
    font-weight: var(--hli-font-weight-regular, 400);
}
button:hover {
    box-shadow: rgba(0, 0, 0, 0.1) 100rem 100rem inset;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
button:active {
    box-shadow: rgba(0, 0, 0, 0.16) 100rem 100rem inset;
}
button:disabled {
    box-shadow: rgba(255, 255, 255, 0.6) 100rem 100rem inset;
}


/* page component */
html, body {
    max-height: 100dvh;
    max-width: 744px;
    margin: 0 auto;
}

body {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    background-color: var(--hli-color-background-1, #F5F6F7);
    margin: 0;
    padding: 0;
    height: 100dvh;
}


/* header component */
header {
    background-color: #fff;
    padding: 8px 16px 0px 16px;
}
header .wrap {
    background-color: #D3DCE8;
    padding: 16px 24px;
    border-radius: 16px;
}
header > h1 {
    padding-bottom: 32px;
}
header .controller {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
header .controller > .ctr {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    column-gap: 8px;
    padding-top: 16px;
}
/*
header .controller > .ctr:first-child {
    padding-top: 0;
}
*/
header .controller > .ctr input {
    max-width: calc(100% - 50%);
}
/* header .controller > .ctr:nth-child(2n+1) {
    padding-top: 16px;
}
header .controller > .ctr:nth-child(2n) {
    padding-top: 16px;
} */

header .controller > .net-state {
    margin-top: 24px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 6px;
    border-radius: 12px;
    color: #fff;
    text-align: center;
    flex: 1;
}


/* main component */
main {
    flex: 1;
    background-color: var(--hli-color-background-0, #FFFFFF);
}
main#output {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    padding: 8px 16px;
    overflow-y: scroll;
}
main#output > div {
    display: flex;
}
/* main#output > div:nth-child(2n+1) {} */
main#output > div.chat-question {
    justify-content: flex-end;
    margin: 0;
}
main#output > div.chat-question > p {
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: var(--hli-color-text-body, #272b2F);
    color: #fff;
    font-size: 0.9rem;
}
/* main#output > div:nth-child(2n) {} */
main#output > div.chat-answer {
    justify-content: flex-start;
    flex-direction: row;
    margin: 0;
    margin-bottom: 16px;
}
main#output > div.chat-answer::before {
    display: inline-block;
    width: 38px;
    height: 38px;
    content: '';
    background: url(../img/svg/ic_ai_with_bg.svg) no-repeat 100% 100%;
    background-size: 38px 38px;
}
main#output > div.chat-answer > p {
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    color: #000;
    font-size: 1.0rem;
}

#pdf-viewer {
    width: 100%;
    flex-direction: column;
}
#pdf-viewer > div {
    flex: 1;
}
#pdf-viewer .pdf-viewer-container {
    display: flex;
    flex-direction: column;
}
#pdf-viewer .pdf-container {
    display: flex;
    flex-direction: row; /* pdf-page 들의 노출 방향 */
    flex-wrap: nowrap;
    /*background-color: #f5f6f7;*/
}
#pdf-viewer .pdf-container.wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-basis: 100%;
    flex: 1;
    overflow: scroll;
}
#pdf-viewer .pdf-page {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.3); /* 종이 같은 느낌을 주기위해 shadow */
}
#pdf-viewer .pdf-container.wrap .pdf-page {
    /* 부모 flex-wrap: wrap 에 영향 받음 */
    flex-grow: 0;   /* 1: 여유 공간이 있을 경우 동일하게 커짐 */
    flex-shrink: 0; /* 1 : 공간이 부족할 경우 동일하게 줄어듦 */
    flex-basis: calc(50% - 0px);   /* 기본크기를 50%로 했으니 한줄에 2개, 3개는 33%, 4개는 25% */
}
/* #pdf-viewer .pdf-viewer-container { flex-direction: row } 일 경우에만 사용
#pdf-viewer .pdf-page:not(:last-child) {
    margin-bottom: 10px;
}
*/
#pdf-viewer .pdf-page svg {
    width: 100%;
    height: auto;
    display: block;
}


/* footer */
footer {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    background-color: #E2E5EA;
}
footer .controller {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 12px 16px;
}
footer .controller > .ctr {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: 16px;
}
footer .controller > .desc {
    font-size: 0.75rem;
    text-align: center;
    margin-top: 8px;
}
footer .ctr_input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 44px 10px 10px;
    overflow: auto;
    resize: none;
    background: #F5F6F7;
    border: 1px solid #E2E5EA;
    border-radius: 8px;
    max-height: 200px;
}


/* popup */
.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 10;
}
.popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 98%;
    height: 98%;
    background-color: white;
    /*padding: 10px;*/
    border-radius: 5px;
    overflow: auto;
}
.close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    min-width: 48px;
    min-height: 48px;
    text-align: center;
    font-size: 2rem;
}

#popupContent .pdf-viewer-container {
    display: flex;
    flex-direction: column;
}
#popupContent .pdf-container {
    display: flex;
    flex-direction: column;
    background-color: #f5f6f7;
}
#popupContent .pdf-page {
    width: 100%;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}